Mobile - Web development

Introduction

About 20 years ago, mobile phones were devices used by business men, sales representatives and Chief Executive Officers; Owning a mobile phone and paying outstanding bills was expensive.  In those days, having a mobile phone was an excessive luxury that not everyone could afford. On the other hand, these devices were huge, and to carry the device was a burden.

Things change, and nowadays mobile phones are everywhere. Not only because bills are cheaper, I think the introduction of Multimedia and cool applications made mobile phones popular.

Internet is everything, news, friends on Facebook, emails and study materials. These goodies were only accessible from a personal computer a few years ago. Today everything is in the palm of our hands. Mobile phone can connect to the Internet, can view emails, has built in GPS and much much more. And yes you can still make phone calls.

In this week’s blog, I will design a mobile web page that can display your exact location using GeoLocations.

About GeoLocation

The GeoLocation API functions are used in web applications to find the geographic location of an object. In simple terms, using this API, a web application can request and find the exact position in terms of Longitude and Latitude of a client accessing the application.

Such technology, is used in a myriad of travelling  web sites; web pages can display nearby restaurants and interesting places to visit. On the other hand, organisations are using this technology to keep track of mobile phones, other devices and travelling employees.

In the old days, when you visit a foreign country for the first time you had to carry a map; surprise, maps are not updated. Today, the only tool that you need is a mobile phone. Locations are updated 24/7, suggested routes are one click of a button and if you’re lost you can always make a phone call and give your exact location to the recipient.

At first glance, this technology sounded complex but when I searched a bit on the Internet I found out that the Geolocations API has a lot of build in functions that can be easily implemented.

The environment

Before going into much detail on how to do this task, I downloaded the Opera Mini emulator.This emulator enables you to test mobile web pages on your personal computer. The emulator is easy to use and the pre-defined list of mobile brands enables you to test your web page on specific mobile devices.

You can choose one of the pre-defined brands and if your mobile is not in the list you can build a custom mobile. Although the emulator uses the host computer Internet connection you can still launch web pages located on your host. This enables you to test web pages that are not yet published on the Internet.

Interface

The web application is divided in the following sections:

• A section that displays the user location
• A link that opens the respective Google map
• A section that displays stored locations

Using HTML markup I added some <div> and <span> tags and designed the following interface:

When the web page is launched, using a JavaScript timer, the user location will update every second. The Start and Stop buttons are used to start and stop the timer respectively. To store the current location, users must click the Record button, and once clicked, the location is added in the Recorded locations section.

Scripting

To check compatibility, I used the following JavaScript If statement:

If the GeoLocation is not installed or not supported, this syntax displays the following error message:

The navigator functions, enables you to construct a position object containing the user exact location. The following function, creates a new instance of the navigator object:

The navigator will call the following functions:

• userLocated - This function is called when a location is obtained
• locationError- This function is called when an error occurs

The userLocated function is used to get and display the user current position. In lines 28 to 20, the latitude, longitude and the time stamp are stored in three global variables.
Using the document.getElementById() and the innerHTML() functions, in lines 33 to 35 the values are displayed in the respective <span> tags.
In lines 38 and 39, the google map hyperlink is constructed using the latitude and the longitude retrieved.
When a location is updated, users can click the Record button to add their current location to the Recorded locations list. The following function is used:

When this function is called, the increment variable is incremented by one; this is used to display the location number. Using paragraph tags, the latitude, longitude, time stamp and google map link are added to the respective <div> tag.
I created a timer that will call the readLocation() function every one second as follows:

To start and stop the timer, I added the following <Input> buttons with the following syntax:

Implementation

Once my project was complete, I tested the web page using the opera mini emulator and some mobiles (Android and Windows). The following screenshots shows the result.
1- Load web page in Opera-mini emulator.

2- Load Google map from the provided link. 

 3- Record client location.

4- Load page using Google Chrome. 

5- View Google map from Google Chrome. 

6- Launch web page from iPhone online emulators. 

Conclusion

To test this application from mobile devices I registered with a free web hosting service and my web page can be accessed from http://omarz.comlu.com/projects/gpsloc/gpsloc.html.
Developing mobile web pages and mobile applications is an interesting and challenging task. I think one of the major difficulties is compatibility; various brands, various browsers. Developers can download emulators to test their mobile web pages.
While I was searching for emulators, I found the Android SDK. This SDK includes all the required libraries and an emulator to develop and test Android applications; I’m very tempted to try some stuff.
Happy coding...

HTML5 - At first glance

HTML 5

HTML5 is the latest markup technology used to build World Wide Web content. While searching the Internet to learn more about it, I bumped into a lot of examples, animations, games and multimedia content. One of the main advantages of HTML5 is that web developers can create cool and complex animation with few lines of code. In fact, if you try to do some simple HTML5 examples using the current HTML, most probably you will give up at start up.

Will not stress out how important it is to including multimedia objects in our web pages, I think everyone is aware that promoting and marketing goods in an attractive fashion is important. And amongst others, HTML5 was designed for multimedia and animation. In fact, many developers are questioning if HTML5 will replace Flash; I recommend reading some blogs on this matter.

What’s new

In this section, I will describe some new HTML5 features that I tried using Google Chrome.

>> In HTML5, the lengthy and difficult to remember Document type declaration has been simplified in the following lines:

<!DOCTYPE html>

As a matter of fact, HTML5 does not need a document type declaration to work and such declaration is only used by older browsers: that require doctype declaration.

>> Image captions are used with screenshots and figures to provide more information and to ease referencing. In HTML5 you can easily add a caption to an image by adding the figcaption tag as follows:

<figure>

     <img src="image path" alt="about image"/>

     <figcaption>

     <p>This is the image caption</p>

     </figcaption>

</figure>

>> When linking to CSS stylesheet, or including a Javascript file in an HTML5 page, the file type can be omitted. HTML5 identifies the file type by processing the file extension.

<link rel="stylesheet" href="CSS path" />

<script src="Javascript path"></script>

>> The contenteditable attribute is used to make a list or a block of text editable. When enabled, this attribute allows users to edit and change the contents of lists and blocks of text. The following is an example:

<ul contenteditable="true">

<li> Create Second life blog </li>

<li> Create HTML5 blog </li>

<li> Start course work 2 </li>

</ul>

>> Email type, is a new attribute of the input field that enables email validation. Without using Javascript and regular expressions, HTML5 can validate an email address with a few lines of code:

<form action="" method="get">

<label for="email">Email:</label>

<input id="email" name="email" type="email" />

<button type="submit"> Submit Form </button>

</form>

When an invalid email is entered, a message is displayed as follows:

>> Using the placeholder attribute, HTML5 enables you to add place holder text in input objects.

<input id="email" name="email" type="email" placeholder="<youremail>@inbox.com"/>

>> The required attribute enables you to specify that an input field is required. No Javascripts and validation is required, just adding the attribute to the input box as follows:

     <input type="text" name="userName" required="required">

>> The new mark tag enables you to highlight specific text in a paragraph.

     <p> My course title is <mark>Client Server Applications</mark></p>

>> With DOM and HTML, in HTML5, developers can easily embed videos, animations and audio.

>> Having a temporary SQL-based database API, in HTML5 developers can store data on the client side. This can be used to store structure data, temporary information, e-mails and shopping details.

>> HTML5 provides a solution that enables developers to store information in the browser’s cache. This enables clients to launch information when offline and load pages faster when online.

Useful links and further information

http://html5test.com/ - This page provides the required tools to test your browser for HTML5 compatibility.

http://diveintohtml5.org/ - A free online book, describing some of the features in HTML5.

http://webdesignledger.com/inspiration/10-html5-demos-to-make-you-forget-about-flash - Some cool HTML5 demos.

http://www.w3schools.com/html5/default.asp - W3C school HTML5 reference, here you can learn more and try the online tutorials.

Conclusion

The features described in this blog are a small part of the HTML5 capabilities. Lot of features and structure improvements are implemented in HTML5 that hopefully I will try in the future. 
I was very impressed with the real time animation and the high quality graphics that can be achieved using HTML5; I think these will impact a bit the popularity of existing animation software like Flash.

Happy scripting...

Second Life - My Last blog

Introduction

My last blog was about sending emails and receiving Notecards. In this week's blog I will try to describe how prims can be configured to receive and forward Notecards and receive emails.

Creating a post box system

A Post Box is an object that enables users to drop/post Notecards. In addition, the Post Box system must enable the Owner to collect, read and manage posted Notecards. To achieve this requirements, I created an object that enables Second Life residents to drag and drop Notecards to it and display the collected Notecards when touched by the owner. The following image shows the object:

The first thing that need to be done is to allow users to drag and drop Notecards into my Post Box. To allow drag and drop, I added the following syntax in the state_entry() event:

llAllowInventoryDrop(TRUE);

When this is enabled, dropped objects are added to the Post Box inventory.

To add some animation to my Post Box, I added the following script that is triggered when an object is dropped on the Post Box.

This simple animation will make the Post Box jump three times in the same location when an Notecard is dropped.

Line 12 checks two actions; If an object was dropped on the prim, or if the inventory list has changed. When one of these conditions is met, the script in lines 14 to 27 is executed.

In line 15, the Post Box location is stored in a vector using llGetPos(). The movement is stored in line 16 in a variable (move). Line 17 stores the loop pointer.

Using a for loop, lines 22 and 23 will move the object vertically 3 times. When the animation is complete, using llOwnerSay(string message), a notification is sent to the owner.

To test my script, I dropped two Notecards in my Post Box and checked my Post Box Contents. The Notecards where there...

The next step is to send the received Notecards to their owner. To achieve this, I added the folowing script in the touch_start() event; this event is triggered whenever an avatar touches my Post Box.

In line 24, the Owner UUID is stored in a key variable (OwnerKey). In line 38 the llDetectedKey(0) is used to get the UUID key of the avatar touching the prim; this is compared with the Owner UUID stored in OwnerKey.

If the Owner is touching the prim, using a for loop and llGiveInventory(key avatar ID, string Object name), all Notecards are forwarded to the owner. Within the loop, the following functions are used: 

• llGetInventoryNumber(INVENTORY_NOTECARD) – This function is used to get the total number of Notecards in the inventory.
• llGetInventoryName(INVENTORY_NOTECARD, integer index) – This function is used to get the name of a specific Notecards, at index.

When I touch the Post Box, the Second Live viewer will launch the following dialog for each Notecard:

Receiving emails

In my last blog, I described how to create an object that can send emails using the llEmail(string email address, string subject, string message). The next step is to enable a prim to receive emails.

First I created a simple prim and using llEmail() function, I sent an email to my inbox to determine the prim email address (<primid>@lsl.secondlife.com).

In the state_entry() event I added the following:

llSetTimerEvent(5,0);

This function will trigger the timer event every 5 seconds. In the timer event, I added the following code:

timer(){

llGetNextEmail(“”,””);

}

The llGetNextEmail(string address, string subject) function, will retrieve the first queued email message from address mail box with subject as the email subject. In this case, since the parameters are omitted, the function will return all emails.

The email() event is triggered when a new email is received. To display the message contents I added the following in the email() event:

Within the email() event, one can access the following parameters:

• time – the email message time
• address – the email message sender email
• subject – the email subject
• message – the email body
• num_left – number of emails left in the mail box

In lines 17 to 19, using the llSay() function, the message, subject and address are being displayed. The following is an example:

Conclusion

Using emails and LSL, one can further enhance a prim to receive instructions via email. This means that a prim can be configured to receive instructions by emails, parse the contents and action accordingly. Sounds cool...

One can also enhance the Post Box system to convert Notecards to emails and forward them to the object owner.

Many technologies exist within second life, and hopefully I will try to experience them in the near future. For now, this is my last blog on Second Life cause I need to move on with other topics and technologies.

Good luck with Second Life....