MozCamp Mumbai, 2009
Cinematographer: Radhamohini Prasad
Duration: 02:25:59; Aspect Ratio: 1.779:1; Hue: 153.852; Saturation: 0.120; Lightness: 0.219; Volume: 0.212; Cuts per Minute: 1.384; Words per Minute: 129.720
Sanjay: Me and Amod have been working on this for about a month. I work with an organisation called CAMP, in Bandra, we're a non-profit trust. We've basically been really excited about Firefox 3.5 because we've been working on a video archive project where we've been using some of the HTML 5 features, that hopefully are going to get to demo for you in Firefox 3.5. So we've been really excited about this for a really long time and now that Firefox 3.5 is getting released we were really keen to have`an event...and i was really lucky to meet Amod who is the campus representative for Mozilla for the past 2 years. He's just been great putting this together and driving the energy behind it. ...We started off with the folks at Mozilla, Arun Ranganathan who works as a Standards Evangelist for Mozilla. He sent us a 20 minute video for MozCamp Mumbai. He was really sorry he couldn't be here, either in person, or on Skype, because he had other commitments. But...er...and you will see in the pre-recorded video that uh...hopefully we can ask him questions and stuff like that. ...Audio...ok...just wanna do a quick test on audio...
(Video plays)
Arun: ...name is Arun, and I'm standing here in the Mozilla office...
Sanjay: er...lights...
http://mozcamp.in/mumbai
Bandra
fx35
mozcamp
mozilla
mumbai
Sanjay and Aamod boot-up the MozCamp after fixing some issues with Wi-Fi and projector. Sanjay talks a bit about OpenWeb and the next three hours of fun..
Arun Ranganathan joins MozCamp Mumbai via a pre-recorded video. Gives the campers Introduction to Firefox 3.5. Also talks on OpenWeb, and implementation of Web Standards in Firefox 3.5
(Pre-recorded video plays...)
Arun: Hi there, MozCamp Mumbai. My name is Arun and I'm standing here in the Mozilla offices in Mountain View, and beside me, which you can't see, are my colleagues Asa Dotzler and Mary Colvig, who are actually making this happen. We're recording a video for you, and we're really, really excited about this event in Mumbai. I actually wish I could be there, personally, or I wish I could dial-in vie Skype, but I think, maybe, the connection's unreliable. So, here's the next best thing, which is me talking to you on a camera. Thank you for coming to this event and thank you for the enthusiasm you show for our product, and for the product we all make together as a community. Its really, really, something quite fantastic. It really makes us feel great. And its one of the ways in which Mozilla and Firefox exceeds.
(Pre-recorded video)
Arun: The two things that I am particularly interested in, happen to be the sweet spot, which we're going to talk about today, which are going to be the web standards, and India... Mozilla's progress in India and Firefox's general progress in India, and the progress of Open standards in India. And so, I think that this gathering is absolutely something that I would have loved to have been at, and I also love Mumbai. So....once again, I'm happy to talk to you on camera, I wish I could be there in person.
(Pre-recorded video)
Arun: One of the things I want to talk to you about today, are some of the things that have gone into Firefox 3.5. A lot of people talk about HTML 5 and there's been a lot of hype in general. I've given atleast two interviews to the press about HTML 5, and where its going, about Open video. But sometimes people think that its all about just HTML 5, but, infact, there's a lot of things that are happening in concert to evolve the web. HTML 5 is definitely one set of really, really important standards, so is CSS, Cascading Style Sheets, where the CSS level 3 specification now, and we implement part of that. And also WebApps, which is the W3C specification for APIs that go into the browser. JavaScript exposed APIs, evolving the AJAX backbone, giving XMLHttpRequest new capabilities... So all of these things don't just happen within HTML 5, they happen in multiple working groups, multiple standardisation efforts. And infact, that's one of the things i want to talk to you about today. When I travelled through India last, we had MozCamp Delhi, and i had a chance to speak at IIT Kanpur and also at Symbiosis at Pune. Once again, I came very close to Mumbai, I went all the way to Pune, but there really wasn't a substantial event in Mumbai. But, the feeling that came out of those travels, is that, some sites just don't recognize Firefox. Moreover, they don't think that Firefox is significant enough for them to allow that browser to access that kind of web content. This includes banks, but it also includes publications, it also includes the media.
Eenadu.net for example, a Telugu language website, has fonts in Telugu that only work on Internet Explorer. And so, that's one way that we're not accessing...that Firefox is not being able to access that type of web content.
(Pre-recorded video)
Arun: Now, lots of people have designed very clever work-arounds and hacks, but one of the things I first want to talk to you about, is fonts. CSS3 introduces a new capability called font face, in which you can download a font for viewing in your web page, from anywhere on the web. This capability actually gives us the new potential of having different kinds of typographies. More dynamic web pages with different kinds of fonts, beautiful fonts. Ofcourse, it can also create the potential for not so handsome design. But, at the same time, it gives us,... it gives international fonts, international literatures a new breath of life, particularly in context of some Indian fonts. Let me quickly show you a demo. So we're going to skip to the screen here which I have....
This is a demo which shows the font face property that I was talking about before and how it behaves in Firefox 3.5 and in other browsers that support font face. These fonts tell the story of font face in a new and creative way, by introducing fonts that are downloaded from different parts of the web. So this pretty font here is actually not a png image or jpeg image, but a real font - I can cut-paste its data. In the past when people wanted to use pretty fonts on the web, they would often use png images or jpeg images as substitutes for the actual beautiful font. Whereas here, with font face, I can obtain a font that I like and put it on the web. So you can see that this article is infused with different fonts from different parts...from...from the web. Ofcourse, they all come from the same domain in this particular case, but there isn't really a domain restriction. You just have to be careful that how fonts are obtained.
(Pre-recorded video)
Arun: So, in the past when you wanted to do beautiful fonts, you may have resorted to a png image to stand-in for that font, or a jpeg image, that looks like a beautiful font, but is actually an image. You can't cut-paste and access the data. Here you can. This is downloaded off a site. And then we see them mostly meshed into this web page. Now of course, imagine, if we saolved the Telugu font problem using font face. That somebody could create a two-type font and...a font that works for Internet Explorer and using font face it would work seamlessly. The Eenadu folks won't really need to do alot of effort to make this work. That's the kind of new capability that we're excited about. The font story is very, very promising. Let me drop down this web page a little bit more and show you some of the other fonts. Ofcourse, in this column he talks about stuff that he'd like his future facing things. So he'd like better font positioning, ...Which you can see the general gist of things, which is that, there are a lot of different fonts that play together and bring this text alive. And again, each font is from a different part of the web. In this case, in the demo, it comes from the same demo, but we can have fonts that are obtained from different domains, which will allow for different forms of presentation on the web, along with CSS for styling. So this becomes a very, very powerful mechanism for expression. And this is one of the things that's very important for India also. In this talk I will try and talk about things that I feel are very important for Indian developers to know about, just because of site blockages, the lack of penetration of an open source browser, and the ability for it to access different websites. So this may give us an instrument or a tool to help solve some of these site blockages.
(pre-recorded video)
Arun: Another feature which I know is near and dear to Sanjay atleast, just based on the email exchanges we've had, is video on the web. The introduction of video as part of HTML 5, - a new video element. So that now, you're no longer just viewing video in the context of a flash player. If you go to your top sites...youtube, or any of these sites, you find that video is played back using a flash player, which is a little bit of a separate rectangular box within your web page, so that video is not really a first-class citizen of that page. It goes into the domain of flash. With HTML 5 we've evolved a video API as well as had some talk about a video codec that's available just outside the box for developers to use. I'm talking about OggTheora for video, and OggVorbis for audio. Now the status for the actual codec in the specification isn't final, so, the specification ...doesn't explicitly standardise Theora and Vorbis, but it does give you an element and an API to work with, to make video seamlessly integrate into the web page. Here's a demo. A demo will tell the story much better than I can. So I'm often asked when I speak at conferences and other things, "What's the big deal? Why is it such a big deal that Firefox and some other browsers have introduced video just as part of the web? Why can't I use flash? Why isn't flash just a part of the web?" Well, the real story is about capabilities. So, the real story is about how everything stitches together in a seamless tapestry of CSS for design and JavaScript for dynamic capabilities and the document as part of HTML is exposed completely seamlessly, maybe you can bind a filter to it, with SVG. Let me show you some demos that I have...in fact, I showed these when I travelled last. I've also got some much better demos, which show off these features in a much...it shows you the power of these features. So...let's take a look at... this demo.
(Pre-recorded video)
Arun: One of the most exciting things that have been introduced as part of HTML 5, is the video capability and the video API, as well as some discussion about the introduction of a possible codec, which is the OggTheora codec, as part of a specification for videos, part of the actual HTML 5 specification. But that hasn't progressed as much because codecs are complicated. But in the context of the video API to do some amazingly powerful things. I'm often asked at conferences, "What difference does it make, that, browsers like Firefox have introduced a video capability?...Why not just use flash? ..after all that's what developers have been used to..."
Let me play this video and talk through some of the reasons of 'why not'........
(video sound disappears)
Sanjay: Sorry guys....some projector issues....
(Pre-recorded video...sound returns)
Arun: ...better. Some of you may recognise this video as its playing, as coming from a popular movie. As its playing, I'm going to do stuff to the video content. For example, I'm going to hover over it, and as i hover over it, I blur out the video as its playing. Again, I can go to edge colours by hovering over the videos once again. I've made the colour palette completely different by applying a filter to it with CSS. Now, I click on 'colour' and change the colour scheme completely by hovering over it. Now it has this reddish appearance. This is all simply done by manipulating the content of the video, just as I would on any other part of the web with CSS and with SVG filters. Just as I do with this. So let's look at this demo, let's look at the actual source of this demo...
Here's some very, very simple CSS, that tells me what to do when I hover, over the video, which is what I was doing with my mouse. The hover property describes what to do when you hover over a certain part of the content. You may have seen this in menus, when you hover over some text, something drops down. Now I'm doing it with video, and applying filters to it, like blur filter, edge filter and colour filters, using SVG (Scalable Vector Graphics).
So let's look at how the SVG works. These are some of the Scalable Vector Graphic (SVG) filters that I'm applying to that video content. ..This is how a blur filter is written...this is how the edge filter is written....
Once again, you can email me at
arun@mozilla.com if you want to learn a little bit more about this. I also have the demos posted publicly. Most of them aren't, but ...I will send that along with the video. But this gives you a little insight into what you can't do with flash...
I can view it as an image. I can view the video, what's happening in the video as an image. And that's in fact what is going on in this demo - we're taking pixels of a video and putting them on an HTML 5 canvas element and dynamically changing the background of the video. Once again, something that you can't do with just flash. Something that you can't do when the video is played in a constrained rectangular area that's not accessible to the rest of the web, not accessible to JavaScript or to CSS, or being able to be manipulated with SVG filters. Its a first class citizen of the web. So everything can be smooshed together and be applied, just like in some of the web applications that you see.
(Pre-recorded video)
Arun: Let's take a look at some other video demos. This one takes some of the things you've seen already, but takes it to a different level. Now, here is a circular sort-of video-viewing arena. I press play, and I'm pressing play on a video, and you can see the video is being dynamically manipulated, as if my core was inside a washing machine. So JavaScript is actually dynamically doing stuff to this video, and also making background changes...so you're seeing different pieces of stuff that I've already showed you, happening. This is also something you cannot do if the video is constrained to a third-party application, if its constrained to its own rectangular space on the web. This is actually something that you can do if the video is part of the document, using CSS3, which is from where the font face property comes, and SVG.
But perhaps this demo will really put things together in a way that shows the power of what this feature is, of what its like to have video as part of the web. This demo...let me lay it out clearly ...ah...my screen resolution is fine actually. So I'm going to click play on a video, and you can see a co-worker of mine sort of making a gesture like he's playing an accordian in between two iphones, and what he's playing, what's being injected onto that video is an image. Let me change that image to make it a Firefox logo, that's being scanned, that's being scaled, within the context of the video. I'm dynamically interracting with the video and changing what's being played. Now let me click on a canvas game that's once again being overlaid on top of the video as its playing. And of course, I can do anything to that spot. I can type in my own text, so I'm going to type in "Hello Mumbai", and you can see I'm playing the text on top of the video and I'm toggling it dynamically. I can also draw into that spot. So I'm drawing on a canvas which is being overlaid on top of the video.
(Pre-recorded video)
Arun: But where it becomes really, really interesting, is when I put a video inside that video. So I'm going to click on a video, and play this video, and now you can see that any content on the web is playable within that video. It becomes very, very 'meta' as they say, its a video within a video. But this really illustrates the power of the platform and why video is such an important thing to be introduced as a first-class part of the document, just like any other thing, just like text, or graphics, or anything else.
So I've shown a couple of really promising directions. I think that one of the reasons that open video on the web particularly excites me, in the context of all of you, and in the context of India, and the context of MozCamp Mumbai and stuff like that is`really because, I have always thought that some of the tools to make video have been expensive. The generation of flv files and flash have been expensive. Buying a good developer package, or some of those expensive Adobe tools. Again, a little bit limiting, but with video available that's free and out of the box, the kinds of things that we can do to digitise content and make videos available widely to people`at low costs, make the sharing of such data available at low cost through video is really, really inspirational. Particularly, and now I'm straying off into my pipe dreams and into thinking...this is a conversation I would love to have had with you guys, particularly in the context of lack of literacy where video data really tells a story much better than text data does. And its now, just a part of the web. So you can deliver it over HTTP, just like you can everything else, and it comes out of your browser, so you don't need a third-party extension. And it works on linux, just like it works on anything else. So in the context of free operating systems, and open source browsers, we also decrease the barrier to video content being widely distributed, because its available right away, its available as part of the web. And that to me is particularly exciting. And that's something I would love to have engaged with you on.
(Pre-recorded video)
Arun: There's so many other things that I could talk about, Probably some of the stuff that I work on as part of the web standards endeavour, some of the stuff I work on within JavaScript, some of the new API's available within JavaScript. We tell some of that story on our site, let me show it to you, which is,
http://hacks.mozilla.org
So if you have visited hacks, you'll find articles by quite a lot of my team here, and a lot of other people in the community at large, as well. We tell a story of how we improved JavaScript's performance, so it can be taken as a legitimate, bonafide platform, because the performance of JAvaScript has really, really improved, in certain cases, two-fold, and in some cases, twenty-fold. So you can write really sophisticated apps. So if you're an aspiring developer, and you're wondering what kinds of apps you can build that would delight users, that can be monetised interestingly, that can really, really penetrate the market. Ofcourse, the web has arrived. We've also seen some very interesting announcements about the web itself as an operating system. We've seen announcements by Google about something called Chrome OS, which is interesting because the same standards that we worked on, that make a web application great and a web browser, are now part of a framework that can be part of your operating system. So my message, honestly, to aspiring web developers, is to really think about the web, and to work on the web, and to really keep the dream of the open web alive. And to create amazing content.
I suppose with that, I'll wrap up. If you have any questions, my email address is
arun@mozilla.com
I would love to hear from you. Just put in a little something that says you went to MozCamp Mumbai and then I'd know its from you and that you've seen this video.
Once again, its been a pleasure, have fun, and thank you for celebrating the launch of Firefox 3.5
Bye everyone.
(applause)
Sanjay: Ok...um...if anyone else here still wants to do a session, we still will fit you in. So just raise your hand if you want to do a session on something. Meanwhile I'm going to get BG to help me with this HTML5 session.
We've got ...I prepared some sort of ...well...
(Sanjay and BG setting up for session)
I think what's really important about it is that html4, which is the previous...just to get a sense guys before we start, what's people's level of comfortableness with like technical lingo and shit...like did this video all make sense? ..Yes? Just feel free to raise your hands, stop us, if it goes...if there's an acronym you don't understand, stuff like that.
Audience member: I tried to play the video on the Mozilla site, the demo video, but it doesn't play.
Sanjay: You have Firefox3.5?
Audience member: Ya.
Sanjay: OK, we can check it out...linux...64-bit?
Audience member: No, not 64-bit.
Sanjay: Oh! Then it should work fine. 64-bit, I know there were some issues, but a while ago, like 6 months ago. Should be fixed now.
Audience member: Ubuntu 8.04
Sanjay: ..with firefox3.5. We can check it out in firebug or something.
So, html4 which is...um...so for people who aren't familiar with how the web and standards work, basically when Tim Berners-Lee wrote his first paper in 1990, he came up with a structure of what HTML should look like, which is basically the standard that people publishing documents should use, and people writing browsers to read those documents should use. Right. So there was a common standard, and there was a W3C group formed which comes out with that standard, which people are expected to adhere to, whether you're writing a page for the internet, or whether you're writing a browser. And standards, therefore, the idea is that anyone is free to publish content on the web. So you don't need expensive tools, so that you can do this in a simple text editor, as long as you follow the standards. And the browsers should function the same way.
Baishampayan Ghose and Sanjay Bhangar getting set to talk on HTML5 and Web standards.
Keeping up with the true spirit of BarCamp, BG and Sanjay use the ad-hoc style for their session. They are discussing who starts first..
Sanjay: We have HTML2, HTML3, HTML4 which took on some success. HTML3 was not so much of a success, because you have this constant problem where browsers are trying to implement the newest technologies, and they kind of run ahead of the standards. And then the standards body tries to incorporate some of the things that browsers have implemented, and some of the things that are a good idea into a standard. HTML4 was the last standard that seriously picked up and the Internet Explorer now kind of supports it. But there's constantly a problem, right, between browsers supporting these standards and these standards that are written down.
HTML5 comes to us after now, 8-9 years of the new HTML standard. The web has completely changed in that time. The web, from 1999 to 2009 has completely changed. What we do on the web, what we use it for, everything has changed. A lot of things that needed to be incorporated into the standard were really vital and its really exciting that now you can do a lot of things, and be standards compliant, and not be doing something that requires the user to have a plugin, or something like that. BG...
BG: I think, the primary difference between HTML5 and say, HTML4,3,2,1 is that, HTML5 was designed with the web in mind. Otherwise HTML4 or others, they came from SGML. So they were never really designed for the web, so to speak. All the new features that HTML4 had, they were added in an ad hoc manner. So one browser implemented some new tag and others on the web, the developers, they adopted it and others said "OK we will support that too, because otherwise that website won't work on my browser." So that's how HTML4 worked. But it was never really well designed. Unless you take a look at a very small example. How many of you have seen the HTML4 doctype? How publicated is that? It needs DTDs and all that...huge amount of...
Sanjay: That's, well I can write-up the doctype for HTML5. So, anyone who's ever written a web page, the first thing, if you're like "Oh, I want to write a web page and I don't want to use Dreamweaver or something like that, it should be something that I can write-up in a text editor." - the first thing you come to is the doctype that you see on top of web pages, right, that generally look something like this....like thaaaa....you know, its really like its a strange doctype. The doctype for HTML5 is... this, which is really what it should be.
BG: Yeah, because all of my life, I've copy-pasted the doctypes from other websites....its so horrible that....so many different things, like say HTML1.0, 1.0strict, then transition of their frameset,...everything was huge mess. So the main idea behind HTML5 was to clean up all the mess, maybe breaking a bit of backwards compatibility in the process, if required. But otherwise, really push the web envelope. So, really to make the markup language more than enough to handle the needs of a modern web application. Because, if you look at it, JavaScript has improved by leaps and bounds and ...the scene of the JavaScript,.. inside your browser, is very exciting today, because of all these awesome implementations like V8, Squirrel Monkey(?), SquirrelFish and TraceMonkey....everything. But HTML(5) didn't really evolve..HTML, so to speak. So HTML5 intends to fix that problem.
Sanjay: I've got some good demos of CSS3 features, so maybe I can take over...
BG: ...(inaudible)...
Sanjay: Oh! ...ya ya ya....of course...
(Sanjay and BG preparing for next demo, audience waits)
BG connects his Mac to projector.
Sanjay: Are there any questions from either the first talk or any of this?
(no response from audience)
Screen: HTML 5
What's new?
BG: So ya...HTML5 has a lot of new things, among them it has the audio and video tag, which is... I'm really excited about it. It has a more advanced DOM, DOM in the sense that there are better design methods to manipulate the markup... using JavaScript. Apart from that, there were also new things like the new tags. A bunch of old tags have been dropped from HTML5, which were there in HTML4, and new tags have been introduced. So let's see them...
I'll obviously start with the doctype...
So ya..um...we all know that the doctype of HTML4,3,2 were very horrible. It was mostly because of the fact that HTML4 was in a way derived from HTML, which is like XML. They have all these DTD, etc which you have to mention...which was all a mess.
Now they have really nicely cleaned it all up, so its just <!doctype html> so you don't have to copy-paste from somewhere else, which I used to do.
Screen: Structure
-section
-header
-footer
-nav
-article
BG: So, talking about new tags, 5 new structural tags have been introduced in HTML5. Let's talk about how any modern web page is structured today, using HTML4. So, in those days, we used to use tables for layout, but now we use divs. But how is that better? If you look at it, its not really that semantic. I use this one tag , <div> with say multiple, different kinds of IDs and classes to express the layout of my page. But just by looking at the HTML source, its very hard to figure out the exact structure of the page. Its not really semantic, if you think about it like that. Because <div class="foo"> doesn't say much about what kind of structure the page is trying to express. So, we have these 5 new tags. The first one is called 'section'. Very simple. The section tag is used to demarcate any section of your page. If you have a blog, for example, one section can be the main part of your body. Using HTML4 you can create a <div id="body"> or <div id="container"> ...again that doesn't make sense. So use <section> tag for that. So blog section will have different kinds of blog articles, so usually we can use a <div class="blogpost"> or something like that.
(inaudible exchange between Sanjay and BG about the lights)
Sanjay: Sorry guys.
BG: So say you have a section now, and you have multiple similar items inside that section. Say I have a main container for the page. Now inside that page I have multiple blogposts. For that also the <article> tag has been introduced. The main purpose behind the <article> tag is to express, or ...
Sanjay: Markup?
BG: Yes, markup...to markup the individual items inside a section. So now you don't have to use <div class="blogpost"> or whatever, it doesn't make sense. You just use the <article> tag inside <section>.
Similarly, we have <header> and <footer> and also <nav>. <nav> is for navigation of elements. If you have any navigational elements in your webpage like links to other pages and everything, you put those inside the <nav>. Keeping in mind that these tags don't really affect the layout of the page, you still need to do CSS to define the layout of the page. But its more for semantically marking up the content on the page, which makes when you look at it. So I can put a <nav> at the bottom of the page, if I want, but if I look at it, I can immediately figure out "OK. This is a navigational part," And I can then use CSS to put it at the top of the page if I want. Here, order is not very important in expressing the use of the content, of where and what its actually meant to express. So <header>, <footer>, <nav> and <article>, these are extremely useful.
I can see HTML5 is kind of like, it has become a gateway to web3.0 which is the semantic web. I believe that HTML5 can help in achieving that.
There are now block elements.
Sanjay: Can everyone hear and stuff? There's no problem with hearing?
Screen: Block elements
-aside
-figure
-dialog
-dt
-dd
BG: So, other tags, ...those were top-level tags for describing the structure of the page.
Now, these are Block-level tags....block-level elements. Say if we have a figure or a diagram in a webpage which we usually markup with <div class="image"> or <div class="photo"> or whatever. So, the <div> tag is fine, but its been so over-used in all websites and webpages these days, its become the next generation tag. So it doesn't make sense. The
tag was introduced to show a table of data, but later people started using it for the format and layout of the page. Similarly I believe the <div> tag has been misused a lot because of a lack of a better alternative, honestly. The <div> tag was used to say, divide a page in multiple parts and for lack of a better alternative we use that for each and everything. So aside that, ...say in a ...page...in an article, we might have footnotes, or minor digressions into some other topics. So say we have introduced a new...acronym, we might want to describe the meaning of that acronym. You can use the <aside> tag to basically mean "OK. This is a minor digression from whatever is happening." So you put the <aside> tag, and inside the <aside> tag you can have a
tag or whatever, and you just describe whatever you want to. The <aside> tag can then be displayed using CSS as a footnote, or it can be positioned on the right side of the page, or wherever, it doesn't matter, because these are all semantic tags and they don't really enforce the layout.
Similarly, the <figure> tag can be used to introduce an image or a picture inside a blogpost. Inside a <figure> tag you have the <img> tag and a <legend> tag. <legend> is basically to explain what this image is and <img> is for the image itself. It can be styled very nicely with a border and all that, you can do all that.
The <dialog> tag is again, slightly special...specialised. Its for expressing or writing down a dialogue between 2 parties for example. Inside <dialog> tag you can have multiple pairs of <dt> and <dd>. <dt> is for, say we have a dialogue from Merchant of Venice, for example, somebody is talking to somebody. The name of that guy goes inside a <dt> tag and whatever that guy said goes inside the <dd> tag. So its kind of like text-and-its-definition, text-and-its-definition, ...Its very similar to the <dl> <dt> tags we have today, but its specialised for dialogues. I think I'm sure it will be abused for some other thing too in the future.
Screen: Inline elements
-mark
-time
-meter
-progress
BG: Inline elements, very interesting, ...say today you do a google search on...google search and you land up on a page, a lot of those websites, they highlight the search term in the page, by having a yellow background. So how do you do that today? We use that emphasise tag <em>, or we use some <span class="highlight">, something like that. Again, that's not really semantic. The <mark> tag can be used to mark any part of the text, but not necessarily emphasising it. One use case is just what I talked about right now. You can highlight the search terms which you used to land up on this page, or maybe, highlight any part of it. You just use a <mark> tag, inside it, put any text. You can style it as you want using CSS.
<time> is a tag which you can use around any text which specifies a time or a date in the Gregorian calender.
These are all semantic tags. They help us in organising the data in a nice manner so that probably it can be crawled by searching...or whatever...whatever kind of semantic tool.
The <meter> tag is slightly interesting, very similar to the <time> tag. So if you have any metric unit, like "his height is 6 feet". So,around '6 feet', you put a <meter> tag. Again, another way of marking up data rightly.
The <progress> tag is very interesting. We have these progress bars everywhere. How do you use them? You have <div class="progress-bar"> and inside that you put a <span> and keep on changing the width of it...stuff like that. <progress> tag is used in any kind of progress bar that you have on the page. So if you have some kind of progress bar, just surround it with the <progress> tag and ..understand "OK..this is a progress bar. Forget about it, its not text to be concerned with."
Screen: Interactive elements
-datagrid
-details
-menu
BG: For showing tabular data, we use a tag.
tag is fine, but HTML5 specs recommend that the tag should be used only for read-only data. If the auser, or a script, on the page modifies the data, then don't use a
tag, use a <datagrid> tag for that. Inside the <datagrid> tag, obviously you put a tag anyway, because <datagrid> is a semantic tag, its not really a layout tag. So, you surround the
tag with a <datagrid> tag. It means that this table is read-write, not read-only. Use a stand-alone tag only for read-only content.
The <details> tag is again very similar to the <acronym> and <abbr> tags which we had in HTML4.01. Say, you have a term somewhere and its an inline tag. You just want to put the definition or meaning of something in the same line, but you don't want to show it by default. You want that meaning to be there, but you don't want it to show up by default. I don't know how the browsers will actually implement it, but there will be a tooltip or something like that. So if you have text like say "AJAX" for example and you also want to write down the meaning ...what it exactly means. So, after "AJAX" word you put a <detail> tag and inside that you put what "AJAX" actually means. Then the browser, or your script can somehow nicely display it. You can put a question mark after the "AJAX" word, and you click on it, or mouse-over it and it will show you the details nicely.
<menu> tag is also there. Its for use inside ...its for use in any place where there's an element which is interactive, ie if you click on it, something happens. So it can...there might be a control which might change the CSS of the page. Its bound to a JavaScript onClick handler, as you click on it, the CSS changes, or the background changes or whatever. It is recommended that you put these things - actionable items - inside a <menu> tag, so that its kind of a menu bar that you have on applications. You put these things which are actionable, as i said, change the CSS, or do this, do that, send an email whatever. Put these things inside a <menu> tag. Its another way of organising the data more semantically.
Screen: New Attributes
-ping
-async
BG: 2 very interesting new attributes have been introduced, one is the ping, which has been introduced to the <a> tag. Its very interesting. Today, if you go and download any software from say SourceForge or wherever, you will see that the actual location of the file is not there in the URL. It actually goes to some script which records that you are downloading it, and then it redirects you to the actual file that you are downloading. So people do that because they want to have some sort of analytics, they want to record how many people downloaded the software, or how many people clicked on that page, or whatever. But that's not really good. By just hovering over that link with my mouse I cannot actualy tell where it is going to take me. That's why the ping attribute has been introduced to the <a> tag.
So, the <a> tag has a new attribute ping= and it takes a space-separated list of URLs. href obviously has the actual file. So when you click on it, it obviously gives you the actual file, but the browser also does a simple GETrequest to whatever URLs are specified inside the ping attribute. You can put your analytics code or URL to your analytics engine inside your ping attribute. The guy can still download the file, and when he hovers his mouse over the link, he can see the actual link to the file, but your analytics also works fine.
async is also a nice attribute to really affect JavaScript-heavy pages. Today, what happens is that whenever I have a <script> tag somewhere on the page, the processing of the whole page stops till the whole <script> tag is evaluated somehow.
If i have a <script src="url"> then it will wait until the code file is downloaded and evaluated. Then, it will progress. That really degrades the performance of a website. So we have a nice app where we put the script at the bottom of the page, that's a work-around, not really a solution, because <script> tags ideally should be in the <header>, but they put it inside the <body> tag, just before the <body> tag is closed, so that the page is loaded and then the JavaScript file is loaded.
BG: This Async attribute has been introduced as part of <script>. It basically tells the browser..."Hey, download this file! Or Evaluate this script! - asynchronously. Don't stop the rendering engine to process the JavaScript file. Do it in a new worker thread" That's again a new technology that has been introduced in Firefox3.5, it has something called worker threads. Earlier JavaScript was single-threaded. Any kind of JavaScript application or code is always evaluated or interpreted synchronously, inside a single thread. But now Firefox3.5 has worker threads which basically introduces threaded programming to JavaScript objects. But that's not really a standard, per se, I don't know, I'm sure Firefox3.5 uses a worker thread to download asynchronously JavaScript files.
Screen: Dropped Elements
-center
-font
-strike
BG: 3 very interesting tags have been dropped, and I'm really happy about it. <font> tag was horrible. Imagine many, many old websites have "font font" everywhere. Even today if you use FONTpage or generate html from MSword or something, they use <font> tags...I don't know...they used to do until sometime back. So it has been dropped. It was depricated for quite some time. <font> tag has been dropped completely now.
<strike> tag has been dropped. <strike> tag is what you use when you want to strike a text or a word or whatever. So you might ask "How do I strike out a piece of text?" For that there is <del> tag. If you want to strike out anything now you use the <del> tag around the text and it will be striked out.
Sanjay: You can also do this with some CSS text-decoration property strikethrough.
BG: Yes you can use that also. But that's not...I don't know how you...you probably surround it with a <span> or something. But use the <del> tag, it works out-of-box.
Audience member: ....font tags....
BG: FONt tags??!! No, you don't need <font> tags. What's the use of font tags? Use CSS. See, always understand, HTML is for data, not for presentation. Every presentation element should be in CSS. Never use HTML (any kind of HTML) for layout or any kind of presentation. Its for marking up the data. So whatever data you have, you mark it, "ki yeh property hai, woh property hai" So I just tell it, it is emphasised for example with <em> tag, but its not specified how its emphasised, by default it italicises the word or whatever is inside the <em> tag, but you can override it using CSS. Just say don't italicise, but increase the font by say 100%. So that's why the strike tag was also depricated for a long time. Now it has been dropped completely.
<center> tag also similarly. In those days we used to use <center> tags for aligning. Now you have text-align CSS property. Use that property. I'm very happy with that property.
Screen: Thanks!
BG: Ya, that's basically it. If you have any questions, you can ask me.
Sanjay: OK. Should I run through this really quickly. How are we doing on time?
Voices: Its 4:15
Sanjay: Amod, just keep a little bit of track of that.
Amod: Ya.
Sanjay: Krishnakant is on his way. He'll be here in 10 minutes and then we've got all these sessions. We've got...the first thing I did was write a presentation software.
(inaudible exchange between Sanjay and BG)
Sanjay: No no, this is something I wrote yesterday.
(Sanjay setting up the projector)
Sanjay: I'm going to go straight through to the demos...we've been through new introduced tags. We don't have internet anymore...oh..its just a bit slow. Guys I'm using the internet a bit, if someone's online and downloading youtube videos or something, can you pause while I...?
I'm just going to run through some of the demos from Firfox, a lot of the stuff I'm not really an expert to speak on, but, well, its a Firefox3.5 demo and we had to show some demos so I'm going to show some demos.
It is loading the stuff from online and its being a bit slow...I'm going to skip through this...
So one of the new things that is introduced in the HTML5 spec..and please correct me if I'm wrong on any of these things...a lot of this stuff...I've been interested in this for a long time, but a lot of this stuff I just researched over the past 3-4 days.
It introduced an API for drag-and-drop. If anyone has ever implemented their own drag-and-drop in a web browser, its extremely crazy. You basically check the mousedown element and then, like OK on mousedown you check the moves, see how many pixels its moving, re-adjust the element,- its kind of a bit horrible to do. Now you can... an attribute to any block-level element, you can say dragable="true" and then the element will be dragable. There is an API to be able to drop stuff, which I don't know off the top of my head, but if this page loads up...
Ok, so this is....this is how we used to do drag-and-drop. I'm just going to show you the source. ...just really painful kind of stuff....
...Oh shucks!...
I have a feeling I'm running the wrong browser...
Sanjay: Now we have to wait for this page to load again...sorry again...(laughs)...
Sanjay:...shadow to a block-level element. And the same way you could do text-shadow for a while in other browsers. It was a bit sad that it was not supported in Firefox, but now it is. You can do stuff like this with pure CSS. Just box-shadow and give it the colour and the four sides, you get a really nice-looking shadow like that. Like box-shadow, there's text-shadow which will give shadow to your text, to your fonts....and text stuff, which I'm not actually going to show, since its not so interesting.
CSS transforms gives you some really cool stuff. You can skew elements and give them a certain degree. So you can give them skew and rotation degree, right? ...someone will correct me if I'm wrong...but I don't think I am.
Again we have a demo...not showing...this is kind of cool. ...you can have...
..Let's just wait for this to load up....
So you can do this stuff using basically just HTML, JavaScript and CSS, which is really nice. Its really nice to not have to use flash to do stuff like that. We'll also have all these links up on the wiki so its easy to find. You can see what's going on, this is a style called MozTransform. This style is not actually part of the standard, but its one of those things that Mozilla is pushing, that hopefully becomes part of the standard, because it seems like a good idea. So, you just have a rotate function, and then again, with CSS and JavaScript...you use the JavaScript to update the CSS, and you've got stuff that's rotating, you've got stuff that's dancing around.
Voice from audience(BG): ...IE doesn't support border radius...
Sanjay: IE doesn't support border radius..
And there was stuff that Arun was showing with the font-face property in your CSS basically you can specify; at font-face, define a font-family class. So you say 'my helvetica', or 'my arial', and then you can specify different URL options to fetch from. You can say "Look on the user's machine for some fonts. You can say, "First check local this font or local that font, to check if some font does exist on the user's machine and otherwise fetch it from this URL. That URL can be anywhere on the web. There's already some great free and open font libraries. ]
This again...did I just open this in the wrong browser...what!! (Sreen: Check you airflow!) ...why!?!....oh..its probably fetching the fonts, I'm guessing is what's going on.
And then we see all these little things that work kind of weirdly when you have really slow internet, which is always kind of interesting (chuckles)
Talking about slow internet, I guess our next presentation, we do on offline storage. The HTML5 spec specifies API to do offline storage to let web apps work offline. Raza and Kunal will tell us what that's about.
But again, offline capabilities is really important. Its something that google gears has attempted to do in a non-standards way, and it was felt really important to have a standard around it.
BG: It really helps because gmail and all they added support for offline usage. That's the reason why the standard itself was pushed.
(Adjusting and setting up projector)
Sanjay: How many sessions do we have? Quite a few na? - Guys let's try and keep the sessions down like 10-15 minutes. Really sorry about the delay and... all of this. I'm hoping we don't get kicked out at 6, but we might. What's wrong..? You have the exact same machine?......
(Some more time spent setting up and discussing the issue.)
Is the geolocation API presentation ready? .........let's just do that.
Its all Dells right? There's a power cord there, you probably have the same power cord. You can just use my power cord.
Dipen: Is this offline right now or... ?
Sanjay: You should be online. There is wireless. The network is called pad.ma, it should DHCP. Its very slow. Very, very slow....because I think BG is watching youtube ( :) )
BG: NO no... (chuckles)
Screen: Geo Location API - MozCamp
Dipen Chaudhary
Dipen: Sorry about the very dull slide ...
Screen: -introduction
-Technology overview
-Demo
-Implementational details
-Geolocation object and supported methods
-Look at methods
-Error codes
-Potential use cases
Dipen: So, I will be talking about geolocation API, which is not actually Firefox3.5, but is somewhere around 3.1.2, I guess. But, its a very new specification which allows you to actually make your applications very location-aware. Let's go to the introduction...
Screen: -Provides geo information to web apps
-History of Geo coding and problems
-Google is the geo provider
Dipen: This geolocation API actually provides geo information to your web apps. Previously, if you go into the history of geo coding and IP coding, what previously used to happen was, the ISPs and all the people who want to actually have IP geo coding would have a database through which they will map IP to an area and do a reverse look-up and all that, and find the co-ordinates and deliver that kind of targeted content to the end users. That was very old. There were some hardware geo coding solutions as well, but this one is more on the client side. This uses a very different technique, which is patented by Skyhook. The research has been done in Fraunhofer institute of technology.
So, that's the history of geo coding. Inaccurate IP to area mapping, it becomes obsolete. It doesn't stay relevant for a longer time or period.
So for Firefox3.5 Google is the geo location service provider. For Opera, its Skyhooks.
Actually this all started with Google latitude, which allows you to share your contents with your friends. It also uses the geo location..it uses its own geo location services.
Screen: -Problems with GPS
-Wifi triangulation(Patent with skyhook)
-Cell tower strength
Dipen: Technology overview - We have GPS, right, for determining your co-ordinates and everything. There are a few problems with GPS. The problems are like,....first, its very expensive, not every device can have a GPS. It makes sense for a mobile phone to have GPS, but my laptop cannot have GPS. That way.
It takes relatively longer time to lock down on your machine. It can take upto 5 minutes to actually lock down your location. The main problem is that it doesn't work in metropolitan, crowded areas. It doesn't actually give you any co-ordinates then. It has a problem with densely populated area, or lots of buildings and all that. What this thing is, is basically wifi triangulation. Using your wifi router access, it finds out using the signal strengths of the access points and their MAC IDs. It finds out your co-ordinate. The patent for this is with Skyhook. They are also used for mobile phones, which use cell tower strength as well. The same thing with Google applications.
Ya, so...I have a demo for a very simple geo location thing, which we'll go into the code a little bit later...
So,....the application doesn't give away your co-ordinates just like that, it will ask you, like it does on the top, "Do you want to share location...or don't share?"..like that. I will just share location, let's see if it works.......
So basically, what it does, is it does a transaction with Google, find out your co-ordinates and Google provides you with co-ordinates, depending on your wifi triangulation, the whole technique. Google returns the co-ordinates, time stamp and ....we'll go into more detail later. ....
Screen: Implementation Details
-Geo location object can be used to check availability of geo location API:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(successCallBack, errorCAllBack,{enableHighAccuracy:true,
timeout:0});
} else {
errorCallBack("not supported");
}
Dipen: Geo location object, its basically a subobject of navigator. You can check if you have geo location or not. This is your very usual construct to do that.
Dipen: Given that we have a geo location object in 3.5, and Opera as well, ...so what are the methods supported by these browsers, according to the specification...
Sreen: Methods supported by geolocation obj
- getCurrentPosition(successCallback,errorCallBack,Options)
- watchPosition(successCall,errorCallBack,Options)
- clearWatch(watchID)
watchPosition returns a watchID which can be cleared by clearWatch, keeps calling
successCallback until its cleared off.
Dipen: There are 3 supported methods...one is getCurrentPosition, it takes 3 arguments - successCallback, errorCallBack and Options. What it does, is you call this method on the geolocation object and if it succeeds, it will pass it along with position object to the successCallback and if it fails, it will go to errorCallBack, and you can give it options.
So if you go into the code...
This is my construct. I check for the geolocation object and I call getCurrentPosition function on the object, and I have 2 CallBack functions which will call back according to whether the transaction failed or passed...er...was successful. In my successful callback, what I do is (this is standard JavaScript) basically get a position object out there, and I can find the co-ordinates by traversing position.coords.latitude and position.coords.longitude, which I pass through googlemaps and I get a map. Its that simple. Whatever you want to do with your co-ordinates, like you can have a lot of things with this kind of thing. If you tag your content with geospecific information, you can deliver that geo specific information to that user. A very simple application, which is not very difficult to make, is what all places have you been, you just let your browser access this and keep registering those latitudes and longitudes from AJAX to your server and just record them. You can create a nice web app.
An interesting function is watchPosition. getCurrentPosition is a one-time function, it makes a transaction, if it passes it calls a successCallback, if it doesn't, it calls errorCallBack.
watchPosition is basically a little key, getting the location every few minutes, whatever timeout you...whatever optnio you pass in. What you can do with this is basically, you can have a scrollmap kind of live map, if you have a mobile, maybe an HTML5 powered broswer on a mobile. Let's say we have a page which is taking your co-ordinates and your map can move through it. This actually gives you a watchId. The first thing doesn't return anything. The second thing returns a watchID which can be cleared out. The whole reason of having a watchID is so that you can stop that position tracking after some time. You can clear your watch, that's the 3rd function. It simply takes your watchId and clears that.
Dipen: Let's look at the geo position object. Its returned if the third transaction was successful. In the first case, the transaction was not successful, it said position unavailable, so didn't geta position object, we actually got an error code back. It gives you a time stamp, it gives you co-ordinates. If you want to look at what the object is like........this is my position object, you go to co-ordinates and get co-ordinates, here is the latitude and here is the longitude. You can give a time out....
Screen: Error Codes for errorCallBack
Accessed by code variable of PositionError Object, possible values:
- UNKNOWN_ERROR (numeric value 0)
- PERMISSION_DENIED (numeric value 1)
- POSITION_UNAVAILABLE (numeric value 2)
- TIMEOUT (numeric value 3)
do a console.log()
Dipen: Talking about the error codes....there are basically 4 Error Codes that are possible with this. One is permission denied - if you click on not-allowed-to-share information you get a permission denied error code. Position unavailable is from the service provider if its not able to locate you, it will give you position unavailable error. And timeout is if you exceed the limit..pass a timeout, usually its 0(zero) which means no timeout. If you pass a timeout and it bails out then it will give you timeout error.
There's nothing more to geo location API. Its a very simple API. This is all you need to know. There is one more thing very vast, if you want to become a geo service provider. Mozilla gives you ability to add listeners so that you can scan all wifi access points around you, which actually requires universal XPCOM permission, which normally a user doesn't have.
(screen changes)
This is how my geo location error looks like. These are constants and the code is through what you access the constants. My code is one which is permission denied.
Sanjay: One question...How reliable is this? I'm guessing its getting locations of known access points from their MAC addresses...
Dipen: Ya, you're right. Its actually reliable upto the point where I had this demo (at home) it exactly gave me my co-ordinates on top of....
Sanjay: Wow! This is Bombay?
Dipen: Ya, Bombay. I live in ... in Goregaon East...it gave on top of it. It depends, I don't know, now we are down here.
Sanjay: Sure..sure.
Audience question:...do routers have to implement this technology...?
Dipen: No no no. You don't have to. Basically, its router.........
...basically this guy, what it does, some Imtiaz, who has the patent. It checks your cell tower. Its the same technology that google latitude uses. The cell tower strength and google maps, google maps, your phone which do not have a GPS can also lock down on a position.
Sanjay: Right, but that's cell phone tower.
Dipen: Ya, cell phone tower. Its the same thing, cell phone tower or wifi access point towers through MAC ids. To keep the database updated you have to do this...all through. So the geo service provider has to do that. I this case google is the provider.
I assume its a very expensive task to do...
Sanjay: But they probably are sweeping the city to check for MAC ids....
Dipen: Ya..Its a very simple API. There's just one object, 3 methods, and 2 more related objects you need to know. That's all. And you can do a lot with this kind of API.
...Any questions?
I wish I could go through the Skyhook thing. But if you want to look it up, its basically called wifi triangualtion and cell tower strength. It doesn't need a GPS and all..and its fairly accurately...like I said, it just pointed on top of my building.
Audience member: Dipen? ....which browsers are supporting this API?
Dipen: I know of Opera, Mozilla...
Aundience member: Opera...10?
Dipen: Ya...10.0 I think Safari4.0b as well.
There's one thing I don't know yet, maybe one of you can find out. What happens if you connect an ethernet LAN cable. I'm not sure about that. Because I have a wireless router at home. So I don't know what happens then. Maybe ...connected soemthing...I'm not sure.
Sanjay: OK. We'll move to the next session on offline storage. How we doing on time... We have another hour. And we have 4 sessions. Let's try and keep it to about 15 minutes a session.
Raza: Offline API's in Firefox3.5. Actually offline API's are part of the HTML5 specification. Firefox3.5 has actually provided support for the same in the browser. It is going to be a short session. I will show some basic demos on how this works. Most of you'll might have used applications such as Google Gears or even in Gmail you have offline support now. So suppose we are typing some important email and then you hit send button and suddenly, say for example, the internet connection goes off. What happens is that your mail, whatever you have typed, is lost.You cannot get it back. SO, it would be nice if suppose, for example there is no internet connection, the browser can automatically detect that there is not net connection and it should actually, ..you know, cache it somewhere...whatever data you have typed. And if your internet connection comes back online, it should automatically resynchronise that data with the service. There should be some way in which te browser is able to detect when an internet connection is present, and when it is not present.
OK. So, this thing is not new basically. In HTML2 and 3 they have this thing caled the navigator object, and navigator object has something called online properties. So something called navigator.online, which should return a true or false value, depending on whether you are online or you are offline. You can use something like if (navigator.online) ...if you're online it will return true, if you're not then it will return false. But this will not do it automatically. Let's say for example, if suddenly you lose your internet connection. navigator.online won't find out itself, you have to call it. So what HTML5 gives you is basically... navigator.online is basically a porperty. So HTML5 is providing 2 new events which are 'online' and 'offline'. What happens is that these events are automatically fired whenever you go online or offline. So whenever you go online, the online event is fired. When you go offline, the offline event is fired. So what you can do is basically, in your JavaScript code, you can actually create some event handlers and you can tag them to these particular events. What will happen is that whenever you go online, say for example, the online event will be fired and the event handler that you have associated with that online event will get executed. And when you're offline the event handler associated with the offline event handler will get executed. OK.
So here you have this basically simple thing over here, where I'm just demonstrating the basic concept over here. So if you look at the source code, what you have over here is that ..the body...I have 2 <div> tags - status and log. ( <div id="status"> and <div id="log">
Kunal:...So...at the top you have got the status div tag and here at the bottom what you see event load status=online is basically the log div tag. So what is happening is basically whenever you go online and offline, these 2 divs are basically getting updated. Now what do I mean by you go offline? - Over here if you look on the file menu, you have an option for work offline. Now when I click 'work offline' you see that the online has automatically changed to offline, and at the bottom it has updated that event is offline and status is offline.
Now, again when I go to file, and I uncheck work offline, that changes back to online. And over here I have event as online and status as online. Now how is that happening? - for that I will show you the code over here - its very simple. What I'm doing is, on the onload event of the body, I'm attaching this particular function called loaded(). <body onload="loaded();">
Now, what is this function loaded() doing? - it is calling updateOnlineStatus and passing the message "load". The updateOnlineStatus, what its doing is simply updating the status on the divs, depending on the message parameter that is attached to it. So, what its doing is, its checking whether a navigator is online or whether it is offline. If it is online or offline, its simply updating those divs.
< function loaded() {
< updateOnlineStatus("load");
< document.body.addEventListener("offline", function () {
< updateOnlineStatus("offline")
< }, false);
< document.body.addEventListener("online", function () {
< updateOnlineStatus("online")
< }, false);
< }
This is what I'm calling basically when the page first loads. Now everytime a user goes online or offline ,this function won't get called everytime. So, basically I need some mechanism through which that function should get called whenever the user goes online or when he comes offline. For that, what I'm doing is document.body.addEventListener, that I'm using, and on offline I'm creating an anonymous function here in which I say updateOnlineStatus and I pass my offline parameter. Similarly, I'm adding an EventListener to the online property, to which I'm attaching the function updateOnlineStatus with the online parameter.
Are you getting it?
Raza: So basically these are 2 events, online and offline, which get automatically get fired depending on whether you are online or offline. Now this thing I've noticed is that... this thing is happening when you go to File and click on work offline. I've noticed that if you simply just disconnect your internet connection, if you remove the cable, this thing does not happen. Online and offline status were not getting updated over there. I'm not quite sure, but someone over here can give me the reason behind that..?
Audience voices: Basically you refresh the page perhaps, then you will get that it is offline.
....Firefox does not know....The browser has no way of detecting...Exactly.
Raza: Exactly. currently its working when you manually go to File and check or uncheck 'work offline'. So, is this code clear to you all, basically how its happening?
OK now this was the code I showed jsut because I wanted to demonstrate the basic concept behind these 2 events, online and offline. Now we have one application over here called online task....
Sanjay: One question..sorry...do you know if its possible to set the status to offline? For example if I have a web app and i say ...like in my JavaScript code if I can't ping the server, I'm making a request every 500 milliseconds to the server to check for some data. And say like oh..if that request fails, then mark it as being offline - basically set it to offline. You can do it....OK ...so that would work then, you just implement your own ......right so you're just pinging the server in AJAX, and then setting it to online or offline.
Audience member: Whether Firefox allows you to set that status....
BG: It does, it does. Because if you look at...... there's a nice Todo application ...they have offline support. They have a switch 'go offline'..and it downloads all the data...
Raza: OK. Now over here we have an application called Task Helper. This is a demonstration application which was created by a person called Mark Finkle, and he has actually put up this application on the web and he has given the source code. So, basically, this is demonstrating the,...I mean, what he has done, is basically he has created a TODO list application where you have some list of items. What you can do is, you can add some items to the TODO list, you can remove some items from the TODO list, or you can mark some items as 'read' or 'unread'...I mean 'done' or 'not done'. And what happens is, this thing happens irrespective of whether you are online or whether you are offline. So when you go offline what happens is basically the application checks whether you are online or whether you are offline. If you are online, at the time it simply makes an XMLHttpRequest to a PHP script on the server, and it downloads whatever your status is. Your status is stored inside a JSON file. The JSON file, what it does is simply get your status from there and sends a response to you. And in case you're offline, in that case what it does is, in HTML5 there is something called an application cache, and in DOM they have given some new objects like they have got some task storage objects, there are some storage objects out there. So you can use those ...ya...there is a global storage object actually, which you can use to...suppose you have a domain like
www.something.com, - now what you can do is you can have soemthing like global variables which will be valid throughout your domain. OK. So whatever data you store inside those variables, you can access it from wherever you want from your website. There are actually 3 kinds of storage. You have got local storage, there is global storage and then there is session storage. What we are using over here is global storage. Global storage you can use to store data and access it from your application cache. Now I won't be emphasising more on that, my friend Kunal will be discussing.
Sanjay: Kunal, you have about 6 minutes.
Kunal: Hello friends. I guess Raza explained almost everything. For some reason this application is not running. We had hosted it on (??).net and its not working right now. So...what we have is...do you notice this attribute called manifest. This todo.manifest files list all the names of the files which are needed to be cached...I mean to be served offline. This is the file.
Here we list all the filenames in cache manifestation. We can use it for versioning. If we change this file then we can simply change version number to v2 then Firefox will load these new files. Now here function loaded() with be called onload. Global storage is option for storing, caching data globally. Similarly we have local storage and session storage. Local storage is for storing data in a page, for a single page. And session storage is for storing it per page session. So here this application will actually create a JSON string when we add a task....
Raza:....just open the website....See at the top when you opened this website you saw a dialogue there which said that this website localhost is asking to store data on your computer for offline use. Now how is that dialogue coming - that dialogue is coming because you have that manifest thing at the top. You put that todo.manifest over there because of that Firefox automatically detected that you site wants to store data for offline use. And because of that it shows you that particular dialogue. And if you go to tools....Sorry...go to Edit -> Preferences -> Advanced -> Network... Over here you see that there's a new option called offline storage. It says how ...I mean what is the maximum size of data that you want to cache and here you can also specify whether you want a website to always ask you when you want to store data for offline use. You can check that or uncheck that. Also if there are some exceptions you want, like some websites you maybe simply don't want to allow to store data on your computer, locally. Those will go into exceptions. There are some websites you don't want to even allow to store data offline. Those go into exceptions. The websites which we've allowed will come below here. So when Kunal clicks 'allow', they should actually come inside...below...'the following websites are allowed...' ...
Ya see, below it shows localhost. That shows that basically you have allowed access to this particular website to store data on your machine.
Kunal: When we add a task over here, it will create a JSON string. As we also want it to store offline, we will be storing it in global storage, so that it can be accessed over every page in the domain. Also, there is a function called fetchList. It will check whether the application is online or offline. If the application is online then it will send it to its server. If it is offline then it will send it to the local storage.
Raza: The rest of the code is all JavaScript. ...this is the main cocept behind offline storage.
Dipen: Just to point out, actually, according to the specification there are 2 ways to do it. One is the Sequel interface, which Firefox has not implemented yet. Webkit has. Safari4.0b supports Sequel (SQL) interface, and it implements an SQLite database and you can do all SQL queries, what you do in a normal backend server side application.
This is basically the same thing which was application cache previously. so now its renamed as 'offline storage'. But its basically the same, with addition of 2-3 objects called storage objects....
-and the events also...
-Ya the events..actually the events,...actually online event were before HTML5 itself ...it was in Firefox2 as well...the online object. But this storage, you know local storage, they are new in the application. So its sourced in the application cache. Firefox3.5 has still not implemented the SQL interface. We do not open a database...you can actually set up a database on your system. ..
Ya the sequel interface has not been implemented yet. But webkit has it.
Raza: If you have any questions...
Sanjay: OK I think one of the big things about web standards is to increae accessibility, and there's no one else better than Krishankant to talk to use about accessibility....accessibility features in Firefox in general...
...you need your machine?
Krishnakant: Ya, ofcourse I need the machine.
...
Krishnakant: I think I have to raise the voice a bit, or else people won't know what's happening.
- lower my laptop volume? ...that is sufficient.
(computer voice names links)
OK, now I will not get into a lot of technical details because already a lot of time has been wasted in all these hassles. Nevertheless. There is thing called Screen reader which is available on every operating system. Since I use free software, and since everyone almost uses free software including Firefox, so this is a free software OS and distro called Ubuntu, for those who don't know. Just like all other OSs like in Windows there is a thing called Non Visual Desktop Access which is a free software (NVDA), and in Linux, on GNOME desktop, KDE is not yet so serous about it, though now recently they have started to do something seriously about it. But on GNOME, from version 2.32 onwards we have a very advanced screen reader called ORCA. That's what I was talking about. Generally its like this...to give you a brief overview of the kind of architecture, you should understand this, that every widget which is a part of Gtk which is a part of GNOME inherits a class called Atk, ie accessibility tool kit. There is Atk text, Atk button, Atk checkbox, Atk radio button, Atk address box and you just name it..scroll bars and what not. For any application which inherits Atk to convey with the screen reader called ORCA, there is a middle layer interface called Accessibility toolkit Service Provider Interface(AT-SPI). So even Mozilla Firefox is implementing the Atk but Mozilla has done something more than that, its not that they have just implemented the Atk as it is. They are infact directly making use of the Atk without having the AT-SPI coming in between. AT-SPI was by the way a CORBA service. Anyway I will just show you the basics of the accessibility of Firefox.
Krishnakant: With Firefox, every object which i said inherits Atk, apart from that they have got some more objects. Like there is Atk hyperlink, then there is Atk headings, all sort of things,...Atk form is there. I will just give you a brief thing of what it feels like.
Now, I'm the google page and there a few things I can immediately do. Like say I want to know the links. The simplest thing I can do is start pressing Tab, which says 'images link'. So its not just reading me the text which is around the cursor, but it also tells me the attribute, that it is a link. So immediately I know its a link so immediately I know its a link so I have to hit 'enter' on that.
(computer voice names links)
Krishnakant: That's Orkut, but it says or-kut. ...its the correct pronunciation?
-Ya ya...
(computer voice names links, and 'Google search text')
Krishnakant: OK, now it did not say "link",it said Google search text. And if I press tab further, it would say -
(computer voice: Google search button)
Krishnakant: It says Google search button. So anytime I encounter a button or a text box, all the attributes are just spoken out to me.
(computer voice: I'm feeling lucky....Google search text)
Krishnakant: I'll search for Mozilla Firefox....Ok I'll just say....(types in 'firefox accessibility'. computer voice repeats this)...and I hit enter (computer voice: Firefox......loading. Please wait.)
It said 'Loading. Please wait.' So now I know the page is loading, and fortunately the wifi is very slow actually, because I can actually go through things. Its not yet....
(computer voice: Finished 80%)
Krishnakant: OK...80% done, but its almost finished...(computer voice: 100%)OK. 100% so now I know the page has finished loading. Now how do I navigate through this. Obviously a little bit of searching around, for the first time when a blind person visits a new web page, there are a few things which any blind person would do, with proper training, of course. I just search for headings, because basically every page which complies to the Web Accessibility Guidelines - that is the WCAG2.0, would always make sure that they classify pages into headings. Let's try pressing 'H'. Firefox has a command which works together with ORCA. you have to put ORCA, only then these plugins come into picture. Now let's press 'H' and see what happens...
(computer voice: Google link image heading level 1)
Krishnakant: There is a link called 'Google' and then it is at a heading which is at level 1. So it even tels me that detail. See this...
(computer voice: Search widgets heading level 2)
Krishnakant: OK so search widgets is at heading level 2.
(computer voice: Accessibility features in Mozilla heading level 3)
...which says Accessibility features in Mozilla and its a link. So I know if I go down a little bit I will read the details on that.
(computer voice: ..........)
OK I will just slow down the speech rate of this thing a bit.
(computer voice: Starting orca...)
It has nothnig to do with Firefox, just slowing down....
(computer voice: .......43...40)
I won't slow it further otherwise it will sound like a drunken man.
(computer voice: ....)
I am going to change the (verbosity?) level to 1 otherwise it keeps saying the dots and the commas and everything.
(computer voice: .....says out everything KK does on the screen and then informs him settings have been loaded)
Krishnakant: OK, now the other thing which Firefox exposes is that it even takes care of some small things like the title bar grab. There is a concept in ORCA programming. by the way this screen reader is totally made in Python. They have a concept called Locus of Focus. They expect that all the applications, when they grab the focus, they should give out some information. Not all applications have realised this, but Firefox team realised it. It even grabs the focus for the title bar and extracts the information immediately when it gets the Locus of Focus event for the screen reader. It will take the title bar first. So I know what I was doing. For example, I'm on the desktop I'll just ALT-TAB and go to Firefox, just carefully listen to what it says in the first place.
(computer voice: Firefox Accessibility Google search)
It did not tell me Google or anything, it first said Firefox Accessibility and then the Google search. Obviously the whole thing is in the title bar. So it did not just say 'Firefox'. Firefox is the application, I know, but the Firefox is even exposing the title bar Accessibility information, so they have one more thing called ATK title bar to give the people who are technically sound.
I know that the search starts always from the heading level 2. In google I have come to know now because I'm a regular user of google. Let's say you're a regular visitor of some web site, and you know the hierarchy. Instead of going through all the headings, just see what I do now - I'll just press number '2' on the keyboard...
(computer voice: ..Wrapping to top. Search results heading level 2)
- There you are -
(computer voice: ..Wrapping to top. No more headings at level 2)
-After that, heading level 2 pe koi aur headings nahin hai.
(computer voice: Accessibility features in Mozilla link heading level 3)
-OK. The search results, the main headings start at heading level 2, but the others are at heading level 3. So let's go at the top...I'll go at the top. I'll just press '3' and it will come to the link. It will announce the thing to me.
(computer voice: Accessibility features in Mozilla link heading level 3)
-So I will hit 'Enter' over here. ...just for more fun.
(computer voice: 12%)
-12% So it even tells me the percentage of the page being loaded. So Firefox exposes that even to the screen reader. As you can hear it is reading out the thing.
(computer voice: 75%)
-So almost done. This is the thing which Firefox exposes to the screen reader to access and convert into voice.
(computer voice: 100% Finished loading Accessibility features in Mozilla...)
-It said finished loading and then...
(computer voice: 93%)
-Oh its still doing it.
(computer voice: Mozilla link heading level 1.............)
-OK let's try to read this entire passage. I navigated to the heading, and I will press the keyboard command and see what all Firefox can expose to me as a hypertext accessibility widget.
(computer voice: ............)
Krishnakant: -In the beginning it said 'Bullet', so I know some kind of bulleted list is starting. So again Firefox has got some access keys.
(computer voice:.........)
-I'm pressing 'I' and everytime I press 'I', Firefox sees to it that it supplies that information to ORCA and it tells me where the location is moving. That is something very interesting, if I can move to the links list. I'm going to do something very interesting. Let's say that I have a big page, something like timesofindia or something... huge, huge page. And there are lots and lots of links. I think after I show this one, even sighted people will want to use this extension of Firefox. All I'm going to do is press CTRL-SHIFT-L, just wait a minute and see what happens. It is a big page...
(computer voice: Please choose an item from the list and press OK. Skip to main content modular outcome....)
-So it tells me that there is a list of links up on the screen, and I can choose and press OK on any of the links. So let's go down..
(computer voice: .....lists the link names)
-Now, you have got an entire, huge page and you know what link you wanted, or at least you wanted to see the number of links on the page, just scroll through the links and see what you wanted. You can use this feature, its an extension.
Krishnakant: Now, something more interesting. I want to search Accessibility of windows. So I want to search whether any of these links contains a word 'windows'. So I go here...
(computer voice: Filter contents)
-Filter by say 'windows', let's see what happens, I'll go back, SHIFT-TAB...
(computer voice: Links list assisted technology support on windows)
-OK there is just one link. So just imagine if this link was somewhere down the page, I had to scroll and scroll and scroll, but this is the method I can just get the link out and start actually hitting the 'Enter' key on the link and see what it is. But I can do more with this link. Let's say I want to see what is the text around this link. I don't want to hit this link and go to that page, but I just want to move to that link...I'm in my screen reader, your scroll area might not move, but for a blind person it is very important, that I want to know what is there around that link. So instead of hitting 'Enter', I will say...
(computer voice: Move to link button)
-There's a button called 'Move to link' and I hit 'Enter' on that...
(computer voice: ....)
-OK, immediately I get that...now...one more thing...by default, Firefox also had some things like when you start with ORCA, when you activate ORCA, I can even press 'U'..
(computer voice: Foundation link, community link...)
-and go to the correspondingly next unvisited link. All the links over here are unvisited - I'm here for the first time. Keep on pressing 'U'..
(computer voice: developers link, projects link)
-And if I press SHIFT-U...
(computer voice: developers link, community link)
-OK now let's try pressing 'V' and see what happens.]
(computer voice: ...to top. No more visited links.)
-It says 'No more visited links', which means that I'm visiting this page for the first time. The next time I come here, if I hit 'Enter' on a certain link, next time when I press 'V', it will directly take me to the first visited link.
Krishnakant: Even that feature is available with Firefox and I think the rest of the things almost all of you know - CTRL-K would do exactly what..
(computer voice: Search using Google text)
-Search using Google. Now, if I press...
(computer voice: Search menu search using Google menu Google)
-OK I just pressed CTRL and down arrow, and now what I have is the entire option of what I should use for searching. It even announces that.
(computer voice: Yahoo,
amazon.com,
answers.com,
ask.com, creativecommons, ebay, ubuntu package search, wikipedia.....)
-So all the things are available to me. With Firefox I can do exactly what I feel like doing. Obviously ALT-D can...
(computer voice: Location text
http://www.mozilla.org/access/features)
-OK so even the address bar is completely accessible. And obviously all the menus, like file menus and all the other stuff is there, that all is completely accessible. If someone is really interested in how this actually works and how Firefox is sending information to ORCA, let me see whether I'm having the right things here..and search. I will try and show you the source code, this itself would take about 3 hours, so I'm not going to show anything else but just to tell you that this is the kind of thing it has.
(computer voice: ......)
Krishnakant: OK, if anyone wants to contribute, this is the folder you should be seriously looking at. This is 'Scripts' folder and in the Scripts folder, ...
(computer voice: ......(navigates through file system)...Apps)
-Apps.
(computer voice: Evolution folder)
-We can see...
(computer voice: ....(names everything in folder as focus falls on each item))
-Let's search...
(computer voice: ....mozilla.py Python script)
-OK. You have this mozilla.py and if you open this,...I know all of you are not Python programmers, but if you want to know where to start from if you want to contribute to Firefox accessibility..
(computer voice: ...(reads out script))
-Thats the GPL code as you can see.
(computer voice: ...(continues reading))
-OK Gecko is the interface class which Firefox has actually created for accessibility which implements all those accessibility interfaces. So, obviously it is inheriting that. ...So anyways, if someone wants to look at it, maybe next session or something I can do this in detail.
Krishnakant: This is how the accessibility features are sent over. Inheritance of all the accessibility interfaces for ORCA with respect to GNOME has been inherited and what it does, is the moment there's any event on Firefox, the browser - even with Thunderbird it happens the same thing - any event is there, it sees to it that it traps the process ID of ORCA first, and sends...pipes all the information to that screen reader. The only job of the screen reader is to process it logically and send it to the screen synthesiser, which is eSpeak in this case. Firefox has provided all the accessibility toolkits, more than what GNOME provides actually. That is how the whole thing works. ...I will just close this.
Anyone has any questions or something?
No, you can see such a lot of commands are there but they are so easy to even remember, I mean, I started to use Firefox about what 4 odd years back ,and it took me hardly 5 to 10 minutes to get used to these accessibility features. Its very, very simple, very straightforward. It took me actually one year to understand the whole accessibilty application.
So you can see, someone has really taken the complicated responsibilities on their shoulders, and its that much complicated. That's the reason, you know, blind people find it very easy to use. That's all from me. If anyone has questions please...have we run out time?
Sanjay: Yea,...well we've got about a minute left or so. I'm going to ask one question. Basically if you could put up links on the wiki or something to help people write better web pages, I mean, I'm sure there's still things you can do that would make it easier for...
Krishnakant: Ya..ya. For example, I will tell you, a lot of JavaScripts tend to be inaccessible. So the work is going on, you can obviously contact the ORCA team and also the Mozilla accessibility team, Aaron Leventhal is the author, you can google for his name. One thing is there, that you have to provide this. The other thing I would say is, you can get back to me if there are people who write extensions over here if they know XUL or something like that. There are a lot of beautiful extensions we can write together. Like you saw this link list...any guesses how long this took for a person to write this links list accessibility extension? ...It was a very interesting thing. You could browse the links list and stuff like that. I sat in the bus, I was going to Pune, me and my colleague. The previous night we had had an IRC meeting with the ORCA developers of Sun microsystems. I proposed this idea and there was one guy who actually took it up. I gave all these specifications and little bit of JavaScript code. I sat in the bus. I was with my Datacard ofcourse, and I told him everything, by the time I got down and I went to the University of Pune, this thing was done.
(in response to question from someon in audience)...No...plain XUL and JavaScripting.
Sanjay: OK I think we're done.
KK: OK.
(applause)
...
(Sanjay setting up for next session)
Sanjay: Video in Firefox, We've actually been working on a project, now its been almost 2 years where its been, its an open source video archival project. We've been working with some organisations from around the country, working with documentary film makers, to get their video into this platform. The code is open source, and the content is open...is under open content licenses as well. You can do anything you want with the content, in terms of if you download it, remix it, reupload it. Its got a GPL style license. So, if you download anything form the site, you actually have to give back. Its been...we took kind of a conscious decision not to use Flash and we use the video tag and OggTheora. We are really to work with Jan Gerber. I was hoping he could join us, but with the bad internet, and he's been having some problems with like some lightning and stuff in Germany. I think a server of his went down. I'm not going to bug him right now.
So we've developed some tools, both server side and client side that I would have loved to demo to you, but I can't, so I'm going to ask you guys to please check out the site when you can. We think its fairly exciting. We think a lot of the developments that came out of that make it really easy to do video sites based on HTML5, to have people uploading, uploading video really easily. to have video in the site really easily, and to do some really cool things with it.
Sanjay: For example, setting up this site to do videos from this event, to have a form where people can add videos, literally took me about 20 minutes to do from an existing Django app, and integrating. There were basically a couple of things I wanted to demo - I can demo one of them.
When you upload video to youtube or anything, basically the problem is that either you need to encode the video on your own machine, and then upload a smaller file which youtube will re-encode, for people who are not very familiar with video encoding, its kind of a mess, the politics about the patents and royalties and stuff like that. Its just a complete disaster.
To quickly recap what's happened in the specification...So, the specification clearly said there should be a video and an audio tag. You should be able to treat these elements much like you do images. But, up until June this year, the specification recommended OggTheora and OggVorbis as the 2 codecs to be used for the audio and video tags. These are the only 2 codecs that are known to be open source. They do not have patent restrictions, although the reason they were dropped is because Apple and Nokia claimed that they do potentially have patent restrictions, and therefore they were dropped form the codec. Apple was obviously trying to push the H264 codec, which works with QuickTime, so Safari now ships with H264 default. You can install a plugin to support OggTheora. Its really sad, because the video element was seen as this thing that could kill Flash, that could make video really open. You can right-click on a video - 'Save as' - Its much easier to cross-link. It just makes it a part of the regular web, as Arun was saying in his earlier conversation. What's really sad is that the codec was taken out of the spec, so its not a 100% clear right now.
Sanjay: The browser support right now, as it stands, Apple supports the video tag but with H264. You have to download a plugin to get it to work with OggTheora. Firefox supports the video tag with OggTheora. It will not support H264. You can download plugins, but it will never ship with H264 because there's patent restrictions and people who redistribute Gecko code would not be able to ship with H264 without facing risk of lawsuits. Opera, the nightly builds have working OggTheora compliance. Its all working, they are just waiting for a go-ahead from their lawyers. It would probably work in Opera. I don't think there are any actual ...actually any other browsers. Internet Explorer has not said anything about its support of the video tag. It will hopefully happen with plugins. There is one project which Jan, who worked with us, is now working for - is integrating OggTheora video to wikipedia, which is definitely happening and which is really good news. So wikipedia is definitely going to be using open source video. They've also developed a JavaScript library so that you can write your web pages with the video tag, include this JavaScript library - its called mwEmbed. I'll have the links up on the wiki, that will fall back to other things in other browsers. This usually means Java, there's a player called Cortado in Java which plays OggTheora. It works alright, but its Java, and of course you can't do all these cool things that were demo-ed in Arun's video. You can't use CSS, SVG to do overlays, you can't... Otherwise, with video, some of the stuff you can do with just CSS is just amazing, and you don't really need to know anything special. Just your regular CSS. If there's a favourite JavaScript library you have for animations to do like, you know, appearing, fading out, sliding across the screen, all of that works with the video element, just like it would with any other element.
Sanjay: A tool that Jan developed that is going to be used with wikipedia that I think is really cool, that just really eases the process of uploading videos to websites, especially in India where bandwidth is a big issue. This is a Firefox plugin called Firefogg, that does encoding client-side and then uploads to the server. So the way it works, is you install this plugin called Firfogg, and then if the website that you are uploading to supports this plugin, then you will query the servers, the servers will say 'Oh...I want an Ogg file ...you know... 300 x 240... this is the kind of bitrate the server will give its ideal settings. And the video will get encoded on your machine, and then uploaded to the server. And it will actually upload the video as its encoding. It makes it.........(looks for file on machine)...they are all ogg! That's no good! OK. Er...that's fine. So, I've selected my video, I I submit, and obviously now it doesn't need to encode, so its just uploading. This is just a test app, so its saying 'Encoding', but what its actually doing is its encoding the video and uploading it. This is...its hugely convenient. As someone who's done a lot of work with video, I can't really express how much more convenient it is. Especially for ordinary users, I mean for an ordinary film maker the process is he/she takes the video in the video editing software, into FCP or Premiere or Movie Maker or whatever they make. You get a video file out that's extremely large, thats generally 1GB for 4 minutes if you're dealing with raw video. So you have a 20 minute video that's 5 gigs! You can't even think of uploading that. So what do you do? Your average film maker has to try and figure out video encoding. Even after like 2 years of working with it, I don't know video encoding. Its one of these things that gets more complex the more you know about it. Its just really bad, its really ugly. Nobody should have to deal with it. And you've got film makers trying to figure out "Oh this is the ideal encoding format." They get it down to about 200MB,then they will upload it to youtube, youtube will re-encode it into either H264 now or flv first, which was a really bad format - Your quality gets cut by a lot. Its really inconvenient.
Sanjay: What this plugin really nicely allows you to do, is you can pick your raw video file that's just exported from your video editing software, then do the encoding on your machine, and then it will upload it. Some of the features we have on pad.ma that I really like, which you don't really have on other video sites - you can seek to a particular point in the video. So I can give a URL. I can give you a link to a video, that starts at 3 minutes 50 seconds for example.
BG: You have that on youtube now.
Sanjay: Oh, you can do that on youtube now? OK, we had this working over a year ago but we didn't have Firefox3.5 a year ago, so it wasn't much use.
You can...we do full text annotations, which is interesting. The entire archive is text searchable. There's transcripts and descriptions of video through the archive. And there's a really clean API so you can make...you can upload videos to the site and then be able to pull them on your site with all the data, and do what you want with it. We generate these time-lines which are kind of nice, which are a pixel representation of the movie, which is a little python script that does that. And we have SRT import and export. With video another really nice standard is the .srt standard. Its a subtitle standard. When you're doing multiple languages for video and you need to have captions, there is a really nice jQuery library for .srt files. If you have an .srt file that goes with the video, as you would view it in VLC for example where you can throw in an .srt file and it will show you subtitles over the video. There's a jQuery library, you just have your video element, you have a div element which you "Oh for this video - and this is the subtitle file" and it will populate that div element with the subtitles. Which is really nice, and is really not that straightforward to do with Flash-based players in most cases.
Sanjay: And really there's...our site for example - if you go to it in Internet Explorer - and this has been something, you know, the people who are funding us or the organisations that we work with, are not happy about this - but if you go to it in Internet Explorer, it says, "You have bigger problems that not being able to view this site. Get a better browser." And I think with HTML5, ...I know there's a lot of projects we do for money that we cannot take that attitude - but I think where you can, it is really helpful,..when you follow standards, you follow standards, and refuse to not follow standards because a particular browser or something...it really would take the web to a better place. And for people who make content, for people who are really putting out good content, its something I'd really employ you to do. Follow standards don't give a hang about people who don't. They will have to catch up, and that's the only way we are going to get a better web.
I'm going to leave with Amod to give some more suggestions on popularising Firefox, popularising web standards and what we can do to help. I'm really sorry I didn't have demos for this guys. Please check out our web site. We're really looking for people. Its completely open source and we're completely ..totally looking for developers, and people who are interested in either forking it, using it in their own projects, contributing...Its written in Python TurboGears and we're looking to migrate to Django.
Amod: Moving from some technical stuff to how you can spread Firefox. Like if you're not on the technical side and in marketing or any other media line. This is basically the portal. How many of you are going to Firefox? These projects are going on, on how we can market. I will talk about some recent projects. As you know, Firefox is reaching its 1 billionth download. There is a project called Firefox Billion Downloads - in which... in your city, you go to any landmark. Like say we have Gateway of India. We can go there and take any photographs of a group of people wearing some Firefox apparel or anything, and send it to them. This page gives you details like some tips and all. So we are planning - me and Sanjay - we can do that.
Then this Mozilla Service week is going on in which you can help people, how they can do their stuff on the web. There are 2 ways I want to help in which we can all go. And I need help. Like if you have an organisation and you want to use power of the web, you can sign up here and volunteers like us can just go and help them.
Then this is the thing that has been going on the wiki and many people are interested. Have you figured out mozhunt? What is it? There was a global mozhunt recently it got over. Its on
mozhunt.com but this is a special edition mozhunt I have been set up for Mumbai. People of Mumbai can participate in. What it is, is...the vadapav logo, it has been hidden behind a story basically. To celebrate the release of 3.5 Firefox had made special branded versions and the Internet Explorer team stole it. It is all hidden. We manged to catch them. Its scattered around in the Mozilla sphere. Like, the blogs or websites related to Mozilla and Firefox. So...it is you, the hunters who have to find all those vadapavs. How many of you can? The winner has an official Firefox3.5 T-shirt.
Amod: So what you have to do is sign up on the site. I will show you some examples. Like this website...er...you can't see the URL. You have to find such websites. And when you see the image - the vadapav - you have to just click on it. If you're logged in at
camp.mozhunt.com, this will be recorded - you have found this vadapav and you can find more.
Then another one is...This is all hidden under the Mozilla sphere. You will find many of these posts in planet.mozilla.org...the mozilla planet thing. The person who finds max number of vadapavs wins.
So this is basically the mozhunt thing. Its on now. Since we are getting those images, it is online. Depending on the response, it will be like...we will keep it for one week or more it will be going on. And like this its easy - people get to know more information like reading through blogs and all. So, for getting a T-shirt you have to find more Mozilla related blogs. And of course this thing...we have opened it up. Its William who is working on it and we are like rewriting it, so that it is more generic and everybody can organise such hunts and all.
Amod: I'm done with this....OK...There is an art competition and all, creative things going on for artists or designers, Infectious Design Contest - it is going on, in which you can send designs and all, and if it gets...you have a prize and all if they like it. They are made into T-shirts, stickers or whatever. Basically I'm done with this....
For some updates on wiki...if you have some questions and answers for Arun, which was a video - you can just put it up on the wiki page here. You will get Arun answering those on that page itself.
Any questions...like how we can do that and all? The Billion downloads celebration - you can all do that. Meeting up...for photos.
Audience member 1: How many downloads remaining for 1 billion?
Audience member 2: 23....23 million.
(laughter among audience)
Amod: So for mozhunt you can tell people about this and that's the best way you can popularise Firefox. So people get to know how Mozilla works actually going through the blogs.
Krishnakant: Mozilla is already popular, but its not popular within the governments.
Amod: Ya! So we can tell government to hunt for the T-shirt.
-(laughter)
Amod: First one should happen for the Mumbai University issues!
Audience member 3: I think we should have a serious strategy about these various sites. Its not only about the government. There are many other sites which doesn't work across browsers. And you can't keep abusing the people or the developers. What you're doing is just alienating them. We could have some sort of strategy where we say "OK. Why your site is not working across browsers and what you can do about it?"
BG: I know the number 1 reason why sites don't work. They do not use any JavaScript toolkit, they write raw JavaScript which is very browser-specific. That's why it doesn't work.
Audience member 3: Ya. But those developers may not know. See, generally they scrap the net. Take out whatever they need and paste it all in. See if they are taught. Just basically tell them why something is not working. And how to make it working.
Krishnakant: It might not be the always case.. For example, this Finacle - fortunately one of my colleagues' father is the IT manager of Union Bank. And Union Bank is using this Finacle. The single question he asked in a meeting with Infosys is that is if its only going to work with IE, then you better call that application an IE based application. And that hit them so badly, now its working on Firefox. He was like "I'm going to go to the consumer court or even I will use an RTA to ask why you are not calling it an IE based application....its not a web-based application. Now forget Opera, Safari, no other browser will do it. That is not right. So I think such strategies have to be used with respect to Mumbai University, they have to be well informed that this is a problem. But there was no step taken to improve it.
Audience member 3: See, you keep surfing the web and you keep coming across such sites. And that time its useful and you can't just say that I refuse to use it. Right? Because sometimes, your business or you life depends on it. At that time, what do you do? Either you start abusing them...which may or may not help. So some kind of resource where each developer can be directed.
Krishnakant: You see, such things were not happening about a couple of years back. But looking at Firefox's popularity, some government agencies, which are as good as Microsoft dealers, they are....see now we hear all these political issues about technology free versus proprietary and all. Mujhe nahin lagta main do saal ya teen saal pehle yeh sab suna karta tha...magar...Now the things have become so popular and common man knows about free software, this is the time the proprietary companies will try to push projects like Mozilla Firefox down. So we have to be very alert about this. Why were we not hearing about all this 2-3 years ago then?
Audience member 3: You see, since...last 6-7 months I was using and paynig my bills of Airtel broadband via Firefox on linux. And then last month it stopped working. Then I started communicating with them that why its not working and all that. Then I finally paid by cheque my bill. This time around I checked ...and it started working again.
BG: So say if I need to get the site working right NOW, I would use Firebug. I rewrite the JavaScript form the page to get it to work.
Audience: laughs,...'cause you're a developer!
Krishnakant: So then why don't you start a paid service for people who are so die-hard Firefox fans! You say "Come to me...pay the bills or whatever for my ..."
......
Sanjay: I think our time is up. Everyone, also I suggested this earlier....if people want to hang out after this, we can go to the CAMP studio. We also have better internet! For sure!
Audience member: I have an issue with video...
Sanjay:....its just that the CAMP studio is a bit small...upto 15 or 20 people we can manage..no problem. And there's coffee. And better internet.
People,...all feedback is well appreciated. On our wiki we've got a 'your say' page. Please tell us what you liked or didn't like. So that we can have a better event next time around.
KK: Wifi should be good.
Sanjay: Yes. That is something that...
.........
(discussion about having 2 versions of Firefox on one machine)
(Sanjay wrapping up)
Sanjay: Ae guys please take stuff...!
.....
Pad.ma requires JavaScript.
