Today we continued on HTML5, but this time for mobile phones, where we discussed on the evolution of mobile devices. In today's lab session we tried geolocation on our mobile phones, to check if our mobile supports geolocation or not.
Mobile Device Evolution
- Basic Mobile Phones - used only to call someone and send SMS
- Low-end Mobile Devices - have a poor web browser support, memory was limited, no touch support and some of then had a basic camera or music player
- Mid-end Mobile Devices - have a basic HTML-browser support, sometimes they have 3G, camera is better, music player, application support and games
- High-end Mobile Devices - Have advanced features, camera have a higher mega pixel, have Bluetooth and also have a good web support
- Smartphones - full browser and html support, Wi-Fi supprt, 3G or 4G, music player GPS, Bluetooth, accelerometer and touch support
- Non-phone Devices - Wi-Fi support, browsers and other features
Browsing Types
- Focus Navigation - In focus navigation, the user will use the cursor keypad to scroll the website and navigate between the links.
- Cursor Navigation - In cursor navigation, there will be a mouse cursor on the screen which can be moved using arrow keys.
- Touch Navigation - In touch navigation, the user can navigate either using a finger or using a stylus. When fingers will be used, it might not he that precise. These devices allow the user to gestures that the device can detect to perform actions easily.
- Multitouch Navigation - In multitouch navigation, users may select more than one item at the same time.
Geolocation
Geolocation identifies an object's geographic location, which can be a radar, a computer terminal connected to the Internet or a mobile phone. Since this lesson was about mobile web development, I will be testing if geolocation works on my Nokia 5800 mobile.
The code below shows one way of geolocation using javascript. The
userLocated() function is used to get the position of the device. Line 9 is used to get the latitude coordinated while line 10 is used to get the longitute coordinates. Line 11 is used to get the timestamp of that location. The
locationError() function is used so that if there will be an error, an alert of the error will appear.
1: <html>
2: <head>
3: <title>Geolocation</title>
4: </head>
5: <body>
6: <script type="text/javascript">
7: navigator.geolocation.getCurrentPosition(userLocated, locationError)
8: function userLocated(position){
9: var lat = position.coords.latitude;
10: var long = position.coords.longitude;
11: var timeOfLocation = position.timestamp;
12: document.write(lat + "<br/>");
13: document.write(long + "<br/>");
14: document.write(timeOfLocation);
15: }
16: function locationError(error){
17: alert(error.code);
18: }
19: </script>
20: </body>
21: </html>
 |
| Geolocation Coordinates |
At first I saw nothing on my mobile's browser, but then I installed the opera browser on my mobile and as shown in the above image have been shown on my mobile. The first number (35.9164085) is the latitude, the second number (14.4811542) is the longitude and the third number (1308932361589) is the time-stamp. I tried out another example of geolocation found in
www.html5demos.com/geo where the location was found by showing you a map (see image below). This was found using the IP address, where the location was not that accurate.
 |
| Geolocation Map |
Conclusion
Today's lesson was a very interesting one. Next week our lecture will be on Facebook development.
No comments:
Post a Comment