Last Saturday was the Open Web Camp at Stanford University in Palo Alto. Around 300 developers, designers and project managers signed up to hear up-to-date information about web technologies, accessibility and design. The event was free and, although it started very early for Silicon Valley standards, very well attended.
Mozilla’s contribution (other than being a sponsor) was a keynote on the merits of HTML5 for web development and a call to arms or developers to ask for the implementation of a few missing parts.
Moving pictures have always fascinated people. From the first zoetropes to the multi million dollar blockbusters of today – seeing things move grabs our attention as humans much better than any clever copy or imagery could. Video was alien to the web for a long time. Well, not alien, but we needed plugins to make them play. With newer browsers and HTML5, we now have the <video> element to natively embed video in a web page. This allows us to, amongst other things:
Style video elements with CSS and SVG
Make the video interact with other elements of the document and vice versa
Use Canvas to grab frames from videos and manipulate them
Create accessible video as the controls can be used with a keyboard without us having to write that functionality
Using this arsenal, you can do pretty cool things. You can:
Now it is your turn to show us what you can do with HTML5 video! We don’t expect you to build another Wilderness Downtown or 3 Dreams of Black, but we are very excited to offer you the chance to shine in July’s Mozilla Dev Derby.
Why not use CSS3 and Canvas to redesign the Outer Limits intro? Why not make the video do the things Diana Ross talks about in Upside down? Why not build a video cropping tool in Canvas? How about you have a crack at making closed captioning and subtitling work with HTML5 video? There are many ideas floating about – it just needs a bit of drive and a text editor to go for it. So, show us what you can do!
There are a lot of tools out there to make your life easier with HTML5 video. Vid.ly makes it easy to convert videos, Popcorn.js is a library to sync page content and video and there are many tutorials on video available.
To get you into the mood and see some examples in action, we are running an HTML5 video webinar on the 14th of July and you can ask some questions you have upfront using Google Moderator.
Bring the web screen alive, I dare you! I am off to watch Cinema Paradiso again.
Update 2011-07-20: The video recording of this webinar is now available:
On Thursday, July 14th, at 16:00 UTC, Chris Heilmann will give second in the (so far sporadic) Mozilla Developer Engagement webinar series, discussing syncing HTML5 video with Google maps, using his “Spirit of Indiana Jones” demo as an example. Chris has already blogged about this demo, so this webinar is a chance for you to take part in a conversation, rather than just receive a broadcast.
Take a look at the demo code and the blog post, and then bring your questions to the webinar session. If you have a Google account, you can post questions (or respond to others’) ahead of time in this Google Moderator series; if not, ask your questions in IRC during the session.
The webinar will be broadcast on Air Mozilla, with text chat on #airmozilla on irc.mozilla.org. (There’s an IRC widget on the Air Mozilla page if you need it.)
Add this webinar to your calendar:
Oh, by the way, HTML5 video is the theme of the Mozilla Dev Derby for July. Whether you’re new to working with HTML5 video or an “old pro” (if there is such a thing), submit a demo during July to show off your stuff and win cool prizes.
Last week the Converge SE conference in Columbia, South Carolina attracted about 400 designers, developers and product managers to attend workshops and hear keynotes about all that is new and great in web development.
As you can see on the conference schedule the conference covered a lot of topics, ranging from building communities and providing great end user service over creating engaging video demos up to using CSS pseudo selectors, web fonts and responsive design.
It was especially refreshing to see that instead of showing theoretical examples or demos most of the speakers showed the new technologies as they used them in real products. Ethan Marcotte for example previewed the upcoming Boston Globe redesign to the audience.
Mozilla’s involvement (apart from sponsoring the event) was a keynote on the why of HTML5. In 96 slides and just above 30 minutes I explained:
How HTML5 came to be
Why it is not about selling browsers or hardware or comparing yourself with the competition
That HTML5 is part of a larger world of new technologies
That HTML5 means first and foremost improving the infrastructure for web applications and using the hardware and software people use to their full potentials
That using HTML5 means a shift in our thinking as web developers and needs re-evaluation of some of our “best practices”
That everybody should start using it and help us make it really work instead of being amazed by cool demos but failing to use these new technologies in day to day products
It always amazes me just how fast modern browsers and their JavaScript engines are. And how creative people get when trying to make things work inside a browser instead of relying on a plugin that our end users would have to install (and more importantly constantly keep up to date).
“So what”, you say? Well, having JSMad means that now Firefox can play MP3 files without any Flash. It also means that you can listen to MP3 in the browser without the 64bit issues on Linux. With JSMad we can dive deep into the MP3 format and not only play the song but also get information about it. It allows us to build a lot of native dj-mixers, samplers and sequencers in the nearer future.
Right now JSMad works in Firefox 4+ and on Chrome 13.0+, if you enable the Web Audio API in ‘about:flags’.
I remember when MP3 came out and my computer back then was too slow to encode it without locking up in WinAmp. Back then a scene player also helped me out. Now we do the same inside a browser rather than desktop applications.
I am currently here in Nantes, France at the Web2Day conference giving a talk on the topic of HTML5 and how it affects the audience (consisting of business people, startups, managers and a few developers. The slides of the talk are available Slideshare:
The talk was streamed live via UStream and the recording is available (as a – gasp – Flash embed – we know, so no need for comments like “isn’t it ironic that an HTML5 talk…” unless you want to tell UStream that):
Here are a few of the links I talk about to try out for yourself:
HTML5 needs spokespeople to work. There are a lot of people out there who took on this role, and here at Mozilla we thought it is a good idea to introduce some of them to you with a series of interviews and short videos. The format is simple – we send the experts 10 questions to answer and then do a quick video interview to let them introduce themselves and ask for more detail on some of their answers.
Today we are taking a bit of a detour from HTML5 as we are talking to Seb Lee Delisle. Seb is a long-standing, award-winning Flash developer who lately focuses on “creative coding” independent of platform and technology.
In his workshops he makes web developers leave their comfort zone of defined and limited environments and shows what can be achieved if you play with technology rather than feeling hindered by it.
I’ve invited Seb as I see him as a great opportunity to learn from what the Flash world has been doing for years – in a lot of cases they already overcame problems the HTML5 world has yet to face.
1) You are very known to give workshops and talk about very visual programming – creating beautiful, and highly technical stuff. How do people normally react and do you think we will see more of that in the mainstream?
Generally people seem to react really well! Particularly in the JavaScript community where people are now starting to discover the new creative possibilities in this medium. The part I love the most is showing how such simple code can create beautiful effects.
I’m already seeing subtle animated graphics crossing over into the mainstream – just look at what’s happening with the Google doodle lately. My job is to help programmers to develop a sensibility for animation and use it tastefully.
2) In the past you’ve been known as a pure Flash guy – and actually one of the few that released code outside the Flash community and tried to cross boundaries. Personally I am so tired of the “HTML5 as the Flash killer” and “Flash as the saviour of the web as it is truly cross-platform” arguments. How can we do more to break the barriers between the Flash and non-Flash communities?
Although known primarily for my (BAFTA winning ;-) ) Flash work, these days I seem to be growing into a polymath! In the last month I’ve worked in C++, Processing, JavaScript, and ActionScript and enjoy switching between them all.
The most important thing is to learn as much as we can about all technologies. Then you can make informed decisions about the best tool for the job.
I’m pleased to see other famous Flashers doing great work in JS. Mr Doob (of three.js) used to be a Flash programmer and is an amazing visual coder. Grant Skinner is making a canvas graphics library called Easel.js.
I think it’s unlikely that JSers will be keen to invest time into learning Flash, but it’s important to recognise the strengths of the plug-in and use it where appropriate.
3) Looking at the open web stack, what gets you most excited? Canvas? SVG? Processing? And why?
Canvas is fun but can be a bit CPU heavy if not treated with care. SVG is very interesting, particularly Raphael.js which is a library that neatly wraps SVG and falls back to VML – it even works in IE6! SVG is definitely under-used, particularly when IE9 can render it super fast with the GPU. But we’re lacking good tools to make animated content.
I love the Processing community and Processing.js makes things quite accessible, but for truly optimised canvas rendering you’re probably better off learning the native canvas API.
Canvas is the new thing so naturally everyone’s really excited about it but I think there’s still lots to explore in just moving DOM objects around. You get better backwards compatibility and often it’s faster than canvas.
4) What are the limits of open web technology? Where would you see the next phase of research into standards to go?
This is a really hard question to answer! I guess the biggest difficulty is the sheer number of different vendors that have to work together (or not ;-) ). But the proliferation of webkit means that we’re seeing browsers pop up in a variety of different devices from your eReader to your TV. As these devices get faster and faster it’s going to be a realistic possibility to have games and rich content everywhere. Whether we want that or not is a different matter!
Browsers are still far behind Flash in terms of video, camera access, socket connections and P2P. I would say the most important of these would be video. Browsers should just be able to play a video in the page. But this thorny codec issue doesn’t seem to be disappearing any time soon.
5) Beautiful things also need to perform well. What are your main tips to create smooth animations and interactions that don’t flicker?
This is a hugely wide ranging question! But it’s usually the rendering that’s the bottleneck, especially if you’re working on canvas. Only redraw pixels when you absolutely need to. I’ve just made a demo of the game Asteroids, where I move a little canvas around for the ship, rather than clearing a massive canvas every frame even when just a little bit of the screen needs updating.
If you’re moving DOM objects around, use the 3D CSS transform – even if you just set a z position of 0 you get hardware acceleration in webkit browsers. I’ve made a particle system that handles hundreds of DOM objects and is super fast, even on iOS.
And use requestAnimationFrame rather than a setInterval for your redraw loop. This ensures that you’ll sync with the monitor refresh rate avoiding screen tearing. Perhaps more importantly, it’s disabled when your browser tab isn’t visible which saves your battery.
6) A lot of the things we do when building games and animations is cheating. I remember working on very low-spec environments like Commodore 64 where you could have used real physics algos but found something much less computation heavy that did the job and relied on the human eye to be lazy and fix glitches for me. Is that what we still do?
It’s still what I do. There are very few resources that outline these easy solutions, most books are very advanced. I’ve accumulated and devised these techniques over the years which is why I love sharing and demystifying these techniques on my courses and presentations.
7) Where web design is very much fluent and you never know about resolutions and available screen space (which is why you test for it before you open for example a menu) most gaming seems to be within fixed boundaries. Canvas for example has a fixed size in pixels. Is that a limitation? I always found the unknown part of webdesign the thing that excited me the most as it meant my code has to be bullet-proof.
I agree, but of course this is a huge challenge if you’re building a game and you usually work to a fixed pixel size. Anything based around bitmaps is fixed although I guess you can scale them up and down. Even Flash games seem to use bitmaps these days. It’s ironic because Flash is very good at scaling vector graphics. Historically Flash games have been set to a fixed and small pixel size due to performance issues in the early FlashPlayer versions.
8) Animations just didn’t look right before libraries started implementing easing to simulate natural movement with acceleration and slowing things down naturally. The next step of that is bringing physics into animations. Is that easy these days?
There’s a technique that’s familiar to visual programmers – a real time ease-out that I like to call tweasing. In fact i made a library in Flash called Tweaser that wraps this technique. Traditional tweeners have a start and end point and a duration. Tweasing just has a target and the object eases towards it. If you keep a bit of momentum from the previous frame you can even implement a springy naturalistic movement.
The best reason for using this is that you can change the target at any time during the animation and your object updates its trajectory in a smooth way. It’s really powerful and responsive, especially with 3D. Check tweaser.org for a full video explanation of the technique. Perhaps if enough people want it I’ll port it to JS!
9) What do you think will be the killer use for WebGL on the internet? I’ve played with Google’s Body Browser and I loved it – do you think the web and the open stack is ready for 3D or is Flash with Molehill still ruling that sector?
I’m not sure what the practical uses for in-browser 3D are yet. I expect we’ll probably see some pretty exciting 3D mapping from Google. But of course gaming is what everyone is excited about – it remains to be seen how these 3D gaming capabilities will affect the casual in-browser games market.
There’s something very pleasing about WebGL enabling GPU graphics right there within your browser, but it’s a big problem that IE has no plans to support it. Flash’s GPU enabled player (codename Molehill) has a huge advantage – FlashPlayer take up rates have been incredible with new versions of the player reaching 90% penetration within a few months. I don’t think there’ll ever be another plug-in with the penetration rates of Flash.
Both WebGL and Molehill have huge workflow issues, despite the open source libraries like three.js and Away3D. Thankfully Unity3D have announced that they’re targeting Molehill. Unity3D is truly a joy to work with – it seamlessly imports 3D models and bitmaps, has built in physics, lighting, shadows and a particle system. You even program it with a flavour of JavaScript! So if they could also target webGL…?
10) Inspiration time. What are things you think people should look at to catch the bug of visual programming and where are the tutorials to learn about them?
If you want code tips, you should look no further than Keith Peters. Keith is well known in the ActionScript world for his Making Things Move books. He’s just completed 30 JavaScript experiments in 30 days – well worth checking out.
Outside of JavaScript I’m hugely influenced by digital artists such as Robert Hodgin (@flight404), Chris O’Shea, Jared Tarbell, and Jer Thorp (@blprnt), who all work in a variety of different programming languages.
It’s a really exciting time for interactive technology and in addition to my CreativeJS workshops, I’ll be continuing more large scale motion detection projection projects in openFrameworks and Processing.
Starting from June, Mozilla runs a monthly competition to showcase newest web technologies. In an international competition individuals can submit demos that show the world just how much is possible using open and free technologies in a modern browser.
The Mozilla Dev Derby happens every month and revolves around a certain technology. A panel of judges will pick the winners and give out prizes including awesome laptop bags, Android phones and exclusive MDN T-Shirts. Above all, however, you can see your name pimped by Mozilla on here, on the Derby site and we will do short interviews with all the winners.
Many companies spend a lot of time and effort to create showcase demos to promote their browser, development environment or platform. Whilst this is great we think it makes for a much better learning experience to concentrate on one technology at a time and build smaller, more focused and better documented demos. This is why we want you to be in the driver seat and show us what you can do. There is no better way to learn a new technology than by playing with it.
The rules of the Mozilla Dev Derby are simple:
Your demo must work in a current version of Firefox, Firefox Beta or Firefox Aurora, without requiring plug-ins.
You must include all source code, including for any binary components.
The description of the entry must be clear and accurate.
The demo must be mainly your own work, and must not include unauthorized intellectual property of someone else.
The name of your entry must not include any Mozilla trademarks.
The entry must use open web technologies, such as HTML, CSS, and standard JavaScript APIs
Libraries and modules that are freely available are allowed; proprietary ones are not.
To start off we chose CSS3 Animations as the first challenge. Use CSS to animate page content and create movie-style intros (remember the AT-AT walker demo?) and show us how designers can animate without the need for plugins or scripting knowledge. NOTE: Firefox 5 will introduce support for CSS3 Animations. You should use the Firefox Beta or Aurora channel for this Dev Derby. Your demo will not work in Firefox 4. ;-)
So, Ladies and Gentlemen, start your engines and head over to the Mozilla Dev Derby site.
Just a quick tip that if you are a developer and you lately upgraded Firefox4 to Firefox5 (or why not give Aurora a try?) it tells you that Firebug is not compatible and can’t find an upgrade.
However, there is a compatible version of Firebug (v1.8) available for you: get it here.
Now you can get the latest Firefox goodness and still debug your code.
For the Firefox 4 launch party in London, England we wanted to show off to the audience why it is such a big thing that we are moving leaps and bounds in the browser market. Here are the slides and notes explaining just how much fun we can have as developers these days if we use browsers to their capacity.
Currently there is a lot of confusion what HTML5 is – a lot of companies abuse the term for marketing of all kind of products and some of the demos showcasing HTML 5 don’t use it at all.
Today I will promise not to try to sell you any operating system or hardware with it, I won’t show any comparisons between browsers (how many Goldfish they can show at the same time) and I promise not to go native (although that is the newest fad – calling HTML5 native).
What HTML5 means to a large degree is that the web is the platform – more than ever. We used the web with web services and for storage for years but now we move towards a world where we deliver both data and the applications on it.
The browser is the platform and is everything we need to help our end users fulfil the tasks they set out to do. Instead of having software packages for everything we just go to a web app and use this one. The browser offers us APIs and is fast enough nowadays to deliver great experiences. Webmail, collaborative document editing and image manipulation is just a first step in this direction.
The information how to do all that is available for you for free. A lot of HTML5 resources are out there on the web with full documentation and examples of what can be done. The openness of web development makes it unnecessary to go to expensive corporate training courses or buy any software – all you need is a text editor and a browser.
People are the key. If you look around you, you will find that the leading lights in the HTML5 world are not from one company or were known for years. Instead a lot of them come out of the woodwork totally unexpected which shows that this is much more about enthusiasm than about corporate backing.
We have so many new toys as developers! If I had had all the technologies we can play with across browsers in the past, I am sure my career would have been twice as fast.
Native HTML5 video and audio allows you to manipulate video in any which way and make it talk to the rest of the document. For example:
The latter is very interesting as Canvas and SVG (which is not HTML5 but a “friends” technology) allows you to go very rich in the interface. Using Canvas and SVG you can also enhance data in the page to create beautiful visualisations.
Another thing HTML5 offers are richer forms for the web including datepickers, sliders and autocomplete controls with in-built validation. This should safe us a lot of client side validation code that always gets out of sync and is hard to localise.
Other technologies do very much add to what HTML5 gives us:
Offline storage and local storage allows us to build applications that recognise the user’s connection state and keep them working whilst the connection is down.
CSS3 is the natural progression of CSS and means that we don’t have to create gradients and rounded corners as graphics but can make them easy to change and maintain in our code itself.
WebGL allows us to create 3D interfaces and animations in the browser. Google’s Body Browser is a great example of how rich that can get.
Give this technology to creative people and give them some time and beautiful things can happen. One example is Nike’s better world which looks and acts like a Flash interface but it clean HTML5. Other, ongoing examples of great use of HTML5 technology can be found at the Mozilla demo gallery.
Don’t think this is not you! We need everyone to play with HTML5 to make it work and be used. So if you have a cool HTML5 demo, please send it to us so we can pimp it for you!
The future of the web is a team effort and can and should not be in the hands of a chosen few following a corporate agenda, so please help us and join in! HTML5 is a debate and the more voices coming from different angles, the better the solution will be.
Today we are taking a bit of a detour from HTML5 as we are talking to 