 All right guys, I think we should start now. This presentation is a signing of CSSG HTML5. One thing is, this won't be a beginner level stuff on HTML5, CSSG because I already covered a whole lot of beginner level stuff in the last image that we had called a lot of types on HTML5. There is probably a video somewhere where I talked about CSSG in detail. So, if you want to learn a lot more about radias and their phones and that kind of stuff, you can go to that account. This talk will be more about stuff that I find people should know about, but no one really talks about it. So, this is the kind of stuff that you won't really take it here everywhere else. Another thing about me, my name is Shwetan. I work as a developer. How many people are good developers? And the ones who don't? I'm also part of the WPC. There is a group called WPC Mobile that is also developing. And also, it works all the way with authentication. How many people are on Twitter? So, my Twitter is this. And if you have any questions later on, you can always email me at Shwetanthb.com. So, let's start. Quick question. Since pretty much, I think 70 to 80% of what this content is about, is Shwetanthb. So, the question I want to ask is, what exactly is a standard? What do we mean by a standard? Community starts to agree to work. They agree, since he ends up becoming a standard. Just a set of guidelines. I should have asked you last. Anyone else? Yeah, he was like, you are right. It's just a set of guidelines that everyone follows. Anyone follows those guidelines, things become easier. For example, you have this. Just like in one-on-one switch, it works. Why? Someone must have decided the standard length of the sports, the standard side of the soccer holes, you know, the standard switch, the standard voltage, that much for you. Same thing with, say, USPs. You plug in any kind of USB ports. Why? Someone must have decided the standard size of USB sockets, you know that kind of stuff. Standard going to state a restaurant for it. Now, it's easy to go. So, standards make our lives much easier. It's not just the computer world. It's not just the online world. And this, that's it. Anywhere in the world you go, red is, and green is, right, in France. So, you won't go to many other countries where, you know, green is stopped and red is stopped. Yeah. So, I don't know about North Korea. But in general, you won't find it. Why? Because it's a standard and it saves lives and it regulates traffic. The standards help us quite a lot. And we work, you know, we work a lot on standards. Not just web standards, but also, you know, general internet standards like, you know, with the IDF, you know, SMTP, HPTP, that kind of stuff. You know, also, with Apple standards, like, for example, AAPS. We do not formalize in any way as such, but everyone is implementing it for real. So, are you talking about the stuff that I find really cool? Specifically, stuff that not a lot of people talk about for sure. Most people use our standards, but some of that will also concern not the standards, but also best practices. You're not arguing with me? Okay. So, are we talking about stuff which not a whole lot of people, you know, talk about for sure. And most of that is going to be related to standards or upcoming standards. But also, there's going to be a whole lot to talk about the next big thing when it comes to the web and, you know, certain best practices that you should keep in mind. So, it's divided into three, for our channel, it's cool. Let's look at the shiny ones. How many people have, well, everyone who is a newspaper, and you see those coilers are testing columns. And how many people have read an academic research paper? So, yeah, everyone has seen those academic research papers and testing columns and that kind of stuff. And you can do it with CSS too. You can do it pretty relatively easily, but CSS makes it even easier using multiple columns. So, I think CSS is really what you do if you want to have this give with multiple columns, just say column width, 100 px, column thumb, how many columns do you want, column 1 px for the last rule is the thing in between those columns. It's a very, very simple thing and it's good to start off with this one. And no one talks about it. Whenever I see talks about CSS, no one mentions column after column. So, I'm mentioning it right now. Can people hear? Can people hear me? Now, I can't hear you. So, many people use great columns. Yes. Not exactly. This is a completely different thing than CSS grids. So, the question was, is it in any way related to CSS grids? CSS grids are completely different spec columns, right? And CSS 3 multi columns are very different to define. So, there's not much overlap in between them. They actually have multiple columns within a particular grid. So, you can do that. It will. So, when it comes to I, I have to put my hands up. I can only hope there will be stuff. So, I believe this question. So, the stuff that I'll be talking about is stuff that people don't know about or it's so new that people don't know about it. So, CSS 3 transitions and transforms people talk about it. And I talked about it last time. But the main point that I wanted to make with CSS 3 transitions and transforms is you need to experiment a little bit more. People don't realize that you can actually do a lot with CSS 3 transitions. You can even have a transition on a transform. Which is crazy. So, people who don't know what transitions are it's kind of like this. In this example, just look at these two lines. Don't look at this. What you're doing is saying transition property, background color, transition duration, 4 seconds. So, it's supposed to change the background color and take 4 seconds to do it. So, if I say we have covered background color views take 4 seconds to change from red to blue. So, this is what CSS transitions are. CSS transforms dealing with moving, the element, rotating, scaling, and so on. So, in this example what's happening is MC transform, translate ATTX, ATTX transform transform, translating ATTX to PLX, scale 1.5 so it becomes bigger by 1.5x and rotate for different ways. So, you can combine different things. But once again, my main point being that you should experiment a little bit more. For example, people generally do this like our own page which is nice. You can also do a transform like a transition on a transform. For example, you can make it like this. You can also go a little crazy. So, here what I did was translate it as well as reduce the volume and increase the size. These things you probably want to use in the production website. But you can use every once in a while whenever you're ready to experiment you can do something like this which you can actually use in the proper website. It looks nice. So, just experimenting with CSS transitions and transforms. You can even do transitions on a different space. The main point being experiment more with CSS transitions and transforms. I don't see a lot of people doing that and you can combine a whole lot of stuff. One more thing. Nowadays, you have to design multiple devices. You have to design not just for laptops or desktops, but also mobile devices tablets. And there are multiple resolutions, multiple screen sizes. That's where responsive design comes to the rescue. And it's already a big topic. Everyone is talking about it. This is a shiny thing to talk about. We are not actually making a tool which makes it easy to test out because what happens when you make a responsive site, you need to actually test it in different devices to make sure it's actually responsive. How do you do this? One solution is to buy a bunch of devices and then test it on those. But if you're not made out of money then you're probably not going to do this. You're probably going to save your money and buy just a few devices and then test on those. So we are not actually making an internal tool and then we say, okay, that actually makes sense to release it to the public. So I don't know how many people know this, but we have something called the mobile emulator. It's a free thing you can download. And this emulator world is kind of misleading because generally emulators, what they do they're kind of like faking what the real thing is. But this is an opera mobile emulator. It's the actual opera mobile browser that you get on mobile phones. We just do that instead to work on desktop. So it's the actual browser. It's not immediately. It's the real browser. And the good thing is let me just open it up. When you open it up, you get all of these custom profiles. Right? And you can see, okay, if my site looks on sale, what does my site look on? You can open up this. You want to say, okay, what does my site look on? Say Sony Tablet S. We'll open up this and you can see how it looks over there. Right? So it's a very, very nice tool to see how your site will look and how your site, responsive site will be created in different devices without actually buying those devices. And even this is free. So you're not spending any time on it. Right? So, no opera mobile emulators keep that in mind. Let's move on. How am I doing one time? 15 minutes. 15 minutes? No. 15 minutes is gone. Why is it like this? How many people know about it? Why is it like this? The people who know about it will know about it. But I still don't see people talking about it. Why? Can anyone tell me why? It's such a, it makes your life so much easier. So you can do this or you can do this. You can apply CSS constructs to select elements which after a while makes it very, very easy. How do you apply this? You'll get elements that last in my roots. How do you do this? Why is it like this? It's much easier to do why is it like that or why is it like that. Instead of getting an element by ID you can just write document why is it like that. It actually makes some very, very easy. And it's easy to follow and easy to code. So how much CSS does it have? How much? How much does it have? How much does it have? It was heavily inspired by jQuery. So anyone who is familiar with jQuery will find this very, very nice because it's now natively but there are certain things in CISO which are a little bit more but when it comes to just selecting something using CSS natively natively however if you're making a high performance like highly scalable JavaScript application which really, really has to do a lot of the performance then probably quite like that it's not going to be good if you get an element by ID. So in those cases you get an element by ID. You want to start every piece of performance out of your application but if that's not your primary concern then quite select it. It's a very easy way to select an element. So I give the material by ID on this side. If there are too many elements then get element by ID it could become cumbersome. It could become faster. After a while there might be an inflection point where using quite a selective might be detrimental and I saw if you've got most analyzing quite a selective versus get element by ID you can just search for it and you'll find it. One more thing, how many people know about the class list here? No one. So how many people are familiar with jQuery? So the people who are familiar with jQuery it has four functions add, move, toggle, and delete. So it basically deals with adding, removing, or toggling a class. For example if you have a div and you want to add a class to that div you can do mydiv.classlist.add myclass. Very simple, easy. Everyone will not have that problem with this. Same thing with move. If you want to remove a class you can just say mydiv.classlist.remove myclass. Easy. And much more interesting is toggling. So you can do mydiv.classlist.toggle myclass. So if the class is there, you have to move it if the class is not there, it will add it. So it's nice for adding some kind of effects here and there or toggling, or visibility, or particular elements you can do all that kind of stuff with the class list. You can also check whether the class is there on a div I mean the same class list or contains mydiv. If it's there, attach it it will return true otherwise it will return false. So just search for the class list where it's very handy thing. But no one talks about it. One more thing capturing JavaScript errors with JavaScript. How do you do this? How many people have heard of window talk on it? Three people. So if you do it with something called window talk on it it's a relatively new thing it gives you three things. Whenever you encounter a JavaScript error it fires three things. The error message, the line number and the file URL where the error occurred. So you can do something like this window talk on error function in this case I'm doing an alert which is saying there's a JavaScript error line number on the URL. And you can what can you do with this? You can make better looking in this case I did an alert you can go on to log the error message on the page if you want it's available to use all the time each and every time they type in a new line code. So you can use on error in those cases and you can also log it in like flat file or some kind of database. So you can do that. And there's a nice article on window talk on error on web.com so you can go ahead and check it out. So now the interesting part the next big thing we in opera have been kind of like in the forefront when it comes to technology and what's going to be big. Like for example we talked about HTML file and no one really was talking about it we talked about the mobile web in 2005 when we came out with you know of the mini and that kind of stuff it's only later on that people started to say yes mobile web is really important. So now I'm going to ask you guys what will be the next big thing when it comes to devices or people accessing the web mobiles, tablets what next? protectors okay who said that? very intelligent answer so for me personally I think it's going to be terrible the newest high end mobile phones what's the noise? from my phone who's talking about that? all the newest high end you know for high end TVs that you buy with hand and built router it is very high end built router it is very high chance that that built router might be open and you also have like an outdoor TV store or some kind of laptop that you store it may be open to something else in which you can actually download web apps with an HTML file and actually use them on your TV so the next few slides will be about how you can actually design your TVs and what things you need in mind that are a little bit different than traditional stuff one thing is personal experiences will not work in a traditional way why? because TVs are a communal experience when it comes to laptops you're over there and typing this when it comes to mobile phones you operate a mobile phone with your hands but when it comes to TVs you're far away from the TV you're not interacting with it with the TV that much but sometimes if you're like me you're walking around the house like an idiot trying to see where the remote is right and in general you don't even use the remote that much when it comes to TVs sometimes you don't sometimes you don't there are certain types of applications which will work and certain types of applications which will not work that much and also because TVs are since they are communal it's assumed that people walking in the room you're not the only person seeing the TV screen unless you are put out of the room then it's a different thing but otherwise it's assumed that there are multiple people watching the TV screen so you won't for example open up your bank account on a TV account you won't probably do that but you will probably open up YouTube and watch some videos over there so you can do that there are certain types of applications which make sense and certain types of applications which do not work there are lower effects on devices so generally you control the TV browser using the remote that much but even then asking when you type stuff is a little bit cumbersome so don't ask them to type that much and also don't ask them to scroll so the types of applications that you design you have to keep those things in mind so use large text they're sitting far away from the TV so not right in front of the TV so use large text don't worry about fine detail because on the TV you won't really see it that much and control the hardware capability of the TV in mind because right now the situation is that TVs don't have that much hardware capabilities in terms of processing power they're sometimes even worse than phones so if you have a very very high performance just the application that's given a lot of resources probably not the best idea for TVs so you have to tone it down when it comes to making TV ads we have your TV and regular that you can take a look at once in a week and if you want to discuss a little more you can discuss it offline and you also have your TV store that many new TVs, fine TVs are coming up with so you can take a look and put your app over there ok so now how much so now I'm going to have a talk on devices we started let's take some time yes device orientation I talked about device orientation at the last years why I did in Bangalore but for the people who think again I'm going to talk about it a little bit more just to give you a preview with my phone one of the criticisms that people had with mobile apps or mobile web apps is that they don't compete with native web apps because they don't have the resources to do it say the accelerometer the gyroscope and stuff like that but now we are implementing stuff which will close the gap so this is a build of the mobile for example has support for device orientation and one more thing that I will talk about later on ok so can you see this I can see if I'm rotating it or something can you see you know how it's done it's getting the x, y and z values of this device and setting the RGB values according to RGB value of the background color according to the x, y, z values of the device just doing that just doing that using something called device orientation it's a proper spec for WPC and to use it to do something like this it's a window to add and listen and it's a device orientation so every time something is moved the device is moved this is fired and when this is fired it gives me alpha, beta and gamma values so this, this and this values of the device and let me do and if you think what app wants to see it get it just turn it side is that the same concept yeah it's pretty much the same concept so it's not much different so if we this device orientation is not resorted the next thing is to move not really it's not that much connecting with those events not really, this isn't really that resource intensive the next thing that I'm talking about it may be a little bit more resource intensive also you can have the accelerometer so every time something is moved the acceleration is reported the fire is an event called device motion and once again you have event.acceleration.x event.acceleration.y you know the x, y, z java, beta, gamma values and you can do whatever you want with that so another sneak peak and you can choose whether I should demo it on mobile or on mobile so this is the last this is the last sometimes it works and sometimes it doesn't work the last one on the fourth, like the smile which is you now have access to the webcam inside of the page not using flash using this proper touch and it's called get you in the media I will show you how it's done just set that and then in one part say navigate it or get to the media options if there is a success then a success event is called otherwise an error callback is called right and over here what you do is you associate whenever the success callback is there a stream element you know that the webcam it's basically a stream object you associate that stream object once you do that then you can actually show the video on a webcam this isn't really that interesting but what you can do is also you curate the canvas what you can do is you can say what do crazy stuff the canvas do so you can do that for real life color picture and just in real life you can do that kind of stuff yes I'm going to make some questions regarding camera axis and device orientation especially camera axis there is a nice article on www.apploir.com which explains all of this in detail and you can always contact me afterwards the spec is called the webRTC spec the web real time communication spec it deals with webcam axis audio as well as computer communication right now browsers have implemented only the video part which did not audio and computer communication belongs to happy people these are builds which actually have access for get you to video October 12th actually has access for device orientation camera axis even better so if you haven't downloaded this and with that I'll say thank you and if you have any more questions this is the way to comment yes so what we asked was drone and opera have support for webcam axis to get you to video should we allow it well implement it using a prefix so it's webcam get you to video we're thinking of doing it as well but we're not right now doing it the other browsers are working on it and here we are talking about it it's going to be my own opinion is it's going to be far down the road but at least when it comes to at least when it comes to using it in a video game setting opera mobile is the latest one it actually makes sense more in mobile not on video same I'll have to check on that I'm probably not on mobile we do have support for what exactly we're doing for the webcam axis that's exactly what we're talking about any more questions so how far are you when it comes to when it comes to when it comes to when RTC is there when it comes to video axis when it comes to audio axis when it comes to