Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
hi hello everyone my name is Louis and like DVR cell I used to work in developer relations in Opera Software doing some evangelizing web standards mainly and this is what I'm going to talk about today one of those standards device orientation or as sometimes
I thought it should be called when working with it device disorientation because uh you will see now it looks pretty weird but it also it is also pay powerful and interesting so when I talk about when i talk about device orientation to a lot of people i usually
always sometimes or a concern amount of times I get oh yeah portrait and landscape saying and yeah well if you're wondering if that's what I'm going to talk about no that's not what I mean I mean the other orientation thing the angle thing
so I'm going to start talking today first about what device orientation is and I'm going to talk about the API and what it can be used for I'm also going to show a demo I made then I'm going to talk about some mathematics you need to know to
use the device orientation API because unlike other web api is that you may be familiar with device orientation requires a bit more of mathematics than the usual then i will show some code and finally I'll talk about browsers support and the different
implementations and some tips and tricks that you might be interested in if you're going to use device orientation in your web applications so first I want to ask you how many people here have used a device orientation in the past okay some some people
have most people haven't so let's have a look at what device orientation is so device orientation is a AP I that allows you to know basically three things about your phone so hello can you hear me with this one okay so I'm going to show it with
a tablet so you can imagine that this is just a big phone or a doublet works too but we will see later why that's more complicated but let's imagine this is just a big phone so what device citation tells you is at what angle you're holding the
phone so the different orientations used in which the user is holding the phone it also tells you the speed at which the user is tilting the phone and finally the acceleration that the phone or any mobile device is being subjected to in each of the three axes
that you are seeing on the screen so it has how does it do it so how do you get the information from how do you get so device annotation has three different events the first one is called device orientation which is the most famous that gives you the angles
this is what we are going to see in the demo then device motion which gives you the angular speed or the right rate of change of the movement and it also gives you the acceleration and some other things that we are going to see later and finally kompis needs'
calibration which is exactly what the event says it is it's an event that's triggered when somehow your browser thinks that the compass that is built-in inside the hardware needs to be calibrated and then what usually happens is that about the browser
itself shows some UI to the user and asks the user to perform them some movements in order to calibrate the compound so you shouldn't be too concerned with the last one we're going to see yellow too so what is it good for i would say mainly two different
kinds of things so the first one you can see you can see there on the left is for example is what i call a static application which means that you measure the angles and then you you make a one-off use of that for example when you have to decide on which orientation
you're going to show a map to the user and you want the user to see the north point in the north of the map pointing to the real North and the other thing is dynamic or interactive views in which you want the user to move the phone around and you want
to be able to capture this movement and do something with it what I'm going to talk about today is the second one the dynamic and interactive which is obviously more complicated but also more interesting in the sense that if you managed to master that
one you can obviously also use it for the simplest or one of static purposes so let's start with the first part which is device orientation and the angles in which the user is holding or positioning the phone what I'm going to start showing is I have
a demo and that demo is that's a WebGL model of tea pot made in 3gs and what I'm going to do is I'm going to use my phone my phone is connected to my laptop using web sockets and I'm going to move my phone around and I'm going to move that
I'm going to use it to move that keyboard around so okay sorry about that ok hmm only speaker is connected to the Wi-Fi please hmm ok it it is supposed to be much smoother than this let me try and see if okay so you can see it turning but it's not
really not nearly as smooth enough us what I would like to see i have a video back up for it just let me try one more time okay no it's it's really not working okay so let's have a look at my other video backup so there I don't know if you
[ ... ]
Nota: se han omitido las otras 2.565 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.