 So, the talk that you will see now is GoGeo with HTML5. So, what I will cover in this talk is mainly like how you can use the native geolocation capabilities that are available in HTML5 and leverage it for your application. So, we will just see what are the gachas and gachas that you have here and what do you believe in this. So, I am Jay. So, I am a front-end engineer at Yahoo. So, I work for Yahoo development for evangelism of my APN. So, also I am an avid hacker. So, what strikes your mind when you see something like this? So, yeah, I mean everyone knows it is latitude and longitude, but what more can you improve? Location. Yeah, location. Okay, you know that okay it is a location, fine. But who can guess which location this is? This is a hacker. Yeah, I mean guess is what this latron corresponds to? No, it is not this collage, it is not this venue. No, so it is a location. So, I am just asking if you can guess which location this is. Because this is all you get from HTML5 geolocation. So, yeah, just perfectly wrong. So, this is the coordinates of the Chinatown stadium that we have, where it dates and so on. And our engineer has a nomad that will use his head. So, yeah, how many of us use locations of applications, mobile phones or websites? So, can you name a few? Yeah, four square. I thought that was that even shout four square immediately when I asked that question. So, most of the location-aware apps generally deal with what I work as ABCD. Okay, current location and what are the places that you've checked in, etc. Navigation, I find driving from here to say majestic bus station. Okay, how should I drive, etc. So, position gets updated there. Then you, you know, pinpoints on location. Okay, these are locations of interest, points of interest, etc. So, what a typical location-aware application needs to know mainly is the where of the user. Okay, so, I mean, user context is a lot. I mean, you can infer a lot of the user by checking and getting information of where is the user. For example, say, I have a main user in, say, Bangalore or India. And I know I can probably say that probably is interested in cricket. It's some user context that I can infer out of the content that I have. The other things that matter are what's, once you know the pair of the user, you can also see what's around the user, right? So, once, yeah, once you, so, okay, this user is from this location, etc. You can see what's around the user and what is suggesting some things. So, typically map applications to all of that. The how of the user is also important, like, like I said, driving directions and how we can reach this particular point, how we can probably find a gift shop on the way to their friend's birthday party, right? So, again, I pose this question, why do your location is important? Okay, so now, since you have seen where is the something, can you just say why your location is important once you have the content? Yeah, very nice, yeah. So, I mean, if you can see, based on four-square chickens, retouchings like pocketed, they give you, like, okay, these are the responses available here. So, which raises the, you know, participation of the user to deal and interact with the content that you have. Okay, so, again, so the main thing that everything boils down to is the user context. Okay, once you get user context with your location, you can infer a lot of things, categorize your content accordingly and show them a very, data of higher frequency. Okay, so, user context, context helps you in serving out highly relevant data. And once the user finds very highly relevant data available to him, and he's interacting with the content, he, I mean, obviously, he's a happy user, and that means that our application builds. So, let's just see just a small application, I mean, how, what this does is, like, click on this button. Okay, ask the user's permission to, you know, we'll see a little bit more detail about it. So, this is the current latitude, longitude of this place. Okay. Now, let's just brush up through what the W3C geolocation specification says, and this is just a spec. Okay, it's not the implementation part of it. So, you can actually know what you can expect from any implementation of this specification. Okay, so, in simple words, I'll just go through. The main thing is provide goals using this API with a lat long, which is of the current position. Okay, the other thing is it also gives you information about how accurate that information is, and then the user can plan, I mean, the API user can plan accordingly how he can fall back on a safer content, et cetera. The other things are position updates, okay? I mean, when the user is on the move, how you can get updated positions of the user and allow the app to register to this. So, it doesn't, I mean, the application doesn't have to query every time that, okay, give you position updates, et cetera. Basically, it is asynchronously given to that application once it's registered with the API. And the main thing that is sometimes a disadvantage but sometimes really useful is the user's privacy, okay? So, the user has to give his or her consent about, okay, I'm sharing my location. I mean, I'm safe about it, et cetera. So, let's just see some code here about how you can expect and use this API. So, these are all from the specification and all implementations are there to this specification. So, all of the geolocation data that you find are in this object or this instance from the project, okay? Navigated or geolocated. That's what you have to check for if whatever the browser is giving you that implementation. So, you check if this object is present or not. First of all, when you start it. So, in this, the main thing that most of the applications that you use are to get the user's current position, okay? So, the API is when you call navigator.geolocation.getCurrentPosition. This is asynchronous. We'll see why because the information is not readily available. It has to query somewhere and get that information. So, you have to provide a callback function to this API. So, getCurrentPosition. You give your callback and this, and in that callback, you handle whatever way you want. So, it files us on something called position to the callback function in which we'll see what is perfect. So, in that position object, what you get is coordinates and timestamp. So, coordinate information will go through it. But timestamp is when they have collected this geodata. In the coordinates instance, you have latitude, longitude information which you have already seen. If the device or the user agent is GPS enabled, et cetera, where they can actually get information about what altitude the user is, et cetera. So, it gives you altitude information, the accuracy of it, accuracy of the lat-long information. And also, if there are position updates, the devices can also make use of two other fields like what is field of change, et cetera. So, now, we have seen a simple case where we assume that we are always getting successful responses. But in reality, it's not sometimes things fail. So, this getCurrentPosition also allows you to pass something called an error callback. So, you can gracefully degrade and handle if there is no location available from this API. So, you can pass a success callback and an error callback. So, in that error callback, you get the position error object returned to you in which there is a code and a message typically. So, the code corresponds to one of these. One is unknown error, maybe the network through which it's getting the data is not really that good. The permission denied, if the user has denied the permission, okay, how we can... So, you can use this typically in most of the cases, for example, say you are enabling location to your tweets. Like, not most of the users do it, but still, you get that information using it as you do something else. Position unavailable, if from where you're getting this, your location is not really able to infer where the life long is, if it's times off, etc. So, these are the error conditions that you have and you can use it wisely. The getCurrentPosition also supports a third parameter, okay, which is basically allows the application to pass on some more options of how I want this data. So, the three things that are supported right now are enable high accuracy. So, if an application needs high accurate data only, and it really tries for it, it can pass it as true, of course. If, suppose you just want city-level information which is not that accurate, and by default it's false, so that's what you get. You can also cache this API. So, you can pass on a maximum age. For example, say your application just wants the geolocation initially and from there you take it forward in your application. You can cache it because doing a geolocation API call always is sometimes not very important. And then, timeout as well you can specify how much it has timeout. So, what is the timeout parameter? So, you can say that if you are not getting the data for so much time you pass me a timeout error. Because I don't want to wait for so long. So, now we have seen how we can get the current position of the user. Now we will see two more APIs that is from the geolocation API. The main, this is very useful if you are dealing with users who are on the move. So, what's position is available in the geolocation which basically as I said your application can register if there are position updates. So, this particular API you pass it on callback functions to it and it will move that callback and they by hand report it. If you don't want that through the life cycle of the application usage you can stop the tracking by using a clear watch. So, this watch position returns your watch ID which you can use to clear it. What is the frequency of the watch position? Yeah, so if the user's position is moving. What is the distance? So, typically it also depends on what is the method of getting the geolocation data. I will explain that. So, now we have seen how we can use the data what are the API available etc. A little bit about what are the geolocation technologies involved how the browser or the device or user agent gets the geolocation data. So, the most common one is IP geolocation. So, this is mostly used in all desktop based applications where we have only IP address information. So, can anyone say what are the disadvantages of the geolocation? Yeah, proxy is one thing. So, it's not accurate. Yeah. And it's kind of sometimes applicable to most of the cases also. But other than that exactly, yeah. So, we can collect data and things are there. So, IP geolocation, the main limitation is it can only zero down onto the city level geolocation. So, it can say ok, it is in Bangalore ok. But it cannot really zero down onto the city level etc. So, you cannot really rely on that for you know it driving on the move kind of an application. The other thing which is often used in non desktop based applications is something called trial iteration. So, I just explain you in brief what trial iteration means. So, it's basically like I have this position of the user to get this position I use data around him ok. So, there are three ways that you can use one is GPS information Wi-Fi then it fix 3G you have set the GPRS level to get information from cell types ok. So, the thing is these points are available to you this extra metadata. So, you can say ok these are the Wi-Fi points available around this user. I will get the MAC ID information from this Wi-Fi and send it to my API. It will figure out where I am. So, from two or three positions based on the signal strength it will try to infer which position of that circle of the sphere the user is can accordingly will determine you know. So, there is an algorithm there where it will take from where the area is accepting of those circles So, we will see a little more in detail GPS information is obtained only in GPS enabled device obviously. So, how this works is your device acts as a GPS receiver it gets signals from multiple satellites which pass on information like ok this is from where I am sending this signal and this is the speed this is the timestamp etcetera. So, based on the timestamp information when you project those signals right we can actually determine an approximation of where the user is. The disadvantages here are I mean if you are in a city or a closed building like this the signals cannot be you know directly to the GPS receiver. So, it works really well in rural areas where you don't have too much of other possibilities like Wi-Fi or I mean cell network and that's why in rural areas etcetera GPS is really useful it's fairly useful if you are on the moon driving where it's lagged x and y screen The other most commonly used thing is Wi-Fi endpoints So, what typically the browser does is it sends the API what are the Wi-Fi endpoints available in the vicinity what is the signal that I receive here etcetera. So, based on this the API can calculate where is the approximation of the user. How does that work? Yeah, so it passes on the MAC ID. So, you have the MAC ID you can determine it works through this IP Yeah, but it is a little more you can 0 to 1 a little more ok. So, especially in urban areas where we have multiple Wi-Fi points and you can say there are from different networks you can see how distant are there you can actually it's an approximation again. So, it's. So, it's about practically it is about 10 meters of difference ok that is the general delta that we get, but it's fairly actually I mean practically you can actually argue theoretically probably it's not that but if you see it practically it works very well. Cell tower signals etcetera. So, you have your phone gprs using gprs or 3G from the cell towers you know ok these are the location of the towers and this is the signal and accordingly it can approximate your position. Here again cell tower is not I mean the signals 10 communication signals are not that but less in urban areas there are lots of towers etc. So, these are the things that you are dealing with now let's see how the browsers which API services. Google and Chrome sorry Firefox and Google Chrome they use a Google endpoint here ok. This is the API endpoint to which it sends one of this data IP address or GPS information or the Wi-Fi MAC ID information or the cell tower location information. So, this kind of response back with the lag on coordinates like the C level etc. Whatever Apple Safari or Opera uses is Sky Wireless. So, this is a company which deals with a lot of copyrighted information as well. It's very accurate as well. So, Safari and Opera use Sky Wireless. IE9 internet explorer also got into the game from IE9 onwards ok. So, yeah before that they didn't really have the means to get the data etc. So, for whatever reasons. But yeah if you are dealing with browsers which are IE9 plus you can use navigator.gl again Chrome has it from I guess 10 or 12 version of it. Firefox from accurately from 9, 10 onwards Safari from 5.1 onwards also I think is 9. But if you are dealing with browsers or user agents who do not have such capabilities like a majority of the users around the world are IE6, IE7 it's a way we can't leverage geolocation possibilities. So, locale.com gives some plugins which can be installed which kind of simulates geolocation capabilities. So, I mean the thing is there are no we are dealing with a lot of things right. I mean some process it works and doesn't work there are too many things, too many details to handle. So, instead of dealing with multiple things separately your application should always be held in a hybrid manner. So, get it all in one shot ok. So, for this what is the best way to use? So, if you are building a large scale of your application etc you typically use libraries, you ask it like this. So, why you are in jQuery have this API where they kind of fall back say the browser doesn't have navigator.gl it will fall back to contacts and IP locations service to get based on the IP address. So, I mean that is fine and then you are getting some data out of it and you can actually organize your content and serve it accordingly. So, let's just see. So, in YUI you have a gallery geomodule which you can use I mean typically again as I said the APIs are again the same and the behavior is the same. So, whatever documentation you use is very similar. So, you will get the response accordingly in the coordinates object etc. In jQuery you can use you are able to geolocation support in jQuery and get it with a similar capability. Any questions at this point? Yeah. So, actually cut down few examples but I will show you using this for the first time I will ask you to look at an example for the photos here not me. So, what this does is it uses the geolocation and then queries to get geotact around it. So, it has been written in a very it is available on GitHub. So, it is it has been written in a very clear cut manner. So, you can actually see clearly how they are handling this how they are handling this etc. So, to start off we can look at this application there are also applications like glengs.com of course, Foursquare always they use checking kind of information but most of them started as mobile apps right. So, not many leveraged HTML5 geolocation because it was forever very long. So, glengs.com it gives it and basically you can share your location with your friends or tip specific person etc. So, yeah if you are driving to a birthday party and they are waiting for you can say okay I am at this point so, they have done it very nicely in a nice social manner you can take a look it is interesting yeah, but we have a lot of other mobile applications will start it off where we can actually see how we can do it. So, HTML5 really broke that barrier of the limitation where only GLS enabled devices were used for mobile applications right. So, this gives you a very uniform way of getting geolocation and geolocation and using it. Any questions that you have? So, this is the example that I showed you so, the script part is so, it is the same if you can see basically I am just using geolocation if it is present and I am getting position object which gives me line of view. So, this is it which gives me line of view there is nothing complex in this it is about how we get this information we use it. So, as I said this talk is about how we get it and what is involved with getting it right. So, yeah you can always give it I mean based on the error conditions you can also see how we can gracefully debate the experience for the user anyone else has questions? Yeah. Okay, so navigator geolocation again is available in our environment where HTML file can be interpreted it typically it is a browser. So, if you see most one since HTML file is evolving a lot most of the native applications that you see are moving away from that they are doing away with the native tag and usually does HTML file. So, because a lot of these devices like ipads, tablets all these are supporting HTML file big time. So, with HTML with the browser itself they do it something like a launcher app type of thing where it is like it is like a bookmark kind of thing which will open up a browser and execute your code and serve out. So, that is how the trend is going. Okay, you also have a lot of libraries that provide you a common abstraction over whatever sort of native team that you are aiming for. I mean you like we have Mojito which now open so we have phone gap kind of libraries which allow you to that abstraction layer which you can actually layer it all. I mean it is because all the tablets etc are moving really fast, HTML file is evolving a lot and people are starting to use those. So, if you are starting it now I suggest you go you do not really focus on native things unless your application really needs too much of native API like it is just web content and geolocation about app you are looking at and do it as an HTML file. Yeah, it is evolving but a lot faster. I mean a lot of things which were we were dealing with services for example IP geolocation it has been there for quite a while. What it does is it passes on the like IP address where you can have or you can use your API in the data to get the approximate location of the security user. So, that has been there for long that limitation is going away. So, if you see a lot of other private application techniques where you can actually determine the point that you got it actually put it on and as I am searching to come to right to this application. So, it is getting a lot improved. I mean these limitations so it works on some scrolling moving away. If you see IE6 usage which was about 70% about one and half to two years ago has come down a lot it is about 30 to 40% with a lot of companies on it. So, that allows your web application to do a lot. So, I would say within I mean now a lot of features are using the campaign browser. So, I don't see that point where it is still underrated. So, I mean the other thing is what is your target user? It also depends on that which if you are typically target in the Google engine itself you may have to do it. So, probably after this. But yeah, you have to see what your target users are what is the user setting for your targeting. If most of them are like young and urban area people like they do a lot of IE6 users, tablets so you have to realize that to be complete in this space you have to just pick what you want to do So, what we are getting here is just we need to reverse your code to get this this location so for that Google has really good data in US, India also but it's not that great in European countries. Nokia acquired Naltech recently so it has very good information in European countries as well and also US obviously So, in India Nokia is building that but Google has that Google Places API if you look at it it is fairly very accurate if you are dealing with a lot of urban segment right? So, like if I am targeting like the synthesizer then Google just fill the data location So, for whatever if you just want IP level accuracy you can use it for this Yeah, so at that level IP level there are a lot of IP sites which deal exclusively with the location of the IP address like you have free GUI environment there are a lot of property services which are a lot accurate and if you are really relying on that full time and based on what piece of data you allow yourself to calculate is not good. There are a lot of proprietary providers there is iplegends.com which provides the same data. So, for IP you have a lot because it has been there for a lot of time but I just wonder Yeah, so for India especially you can use Google play which is very important. Yeah, I mean they are all building the database. So, a lot of these people I mean since after geo-typing of content is becoming a lot bigger almost every company is looking to invest from geo-typing the content etc. In developed countries it is a lot better. In developing countries it is fairly good but probably like maybe in math my India doesn't really provide that good idea. So, it depends on the use case I think probably if it is it will be very good you can probably do share content share So, there are lots of things that are happening in developing countries but it is improving very well. So, for the browser it knows what is the matter for the Wi-Fi component is content share. So, the browser has the interface where it can interact with the OS to get this So, yeah, that's how does it switch between IP and desktop? So, that's what it's for laptops typically since most of the laptops have Wi-Fi and they don't use Wi-Fi. They don't know what it is using the Wi-Fi connection etc. They can pass that way if it is a desktop and you are just using a LAN cable So, at that point if you are not making the laptop in your device itself you can use any Wi-Fi input it will rely on which IP address. So, it has that logic and intelligence in place. So, all these browsers they have implemented differently. Navigator.geology.it is called I mean texture of files. Any other questions? So, I'll ask a question that Post-Pair user often click, who will hit the ground first? Any basis? Just take a wild guess Post-Pair would hit the ground first, why? Yeah, you should also say why Okay, so this is a joke Twitter user would hit the ground first because the Post-Pair user would stop in midway to check in at the place. So, these are this is how you can contact me like you have Twitter, Handle etc. So, this is where I am taking a lot of that data information from the WPCS database. So, you can reach me in your case So, I I'll give you a few other talks also so you can check it out Yeah So, thank you Since I am wearing this T-shirt I'll also make a point that make sure your applications are accessible Can I have a guess what is that? It's why it's called accessibility It's a bright alphabetical So, yeah, just to drive this from T-shirt it's not just for blind users we have it for a lot of users It's not very hard now with HTML5 a lot of accessibility Right, thanks a lot Thank you