Thursday, 14 July 2011

Week 20 - Cloud Computing

Cloud Computing

What is cloud computing?

In cloud computing, one can have secure access to all applications and data from any device such as tablet, smartphone, laptop, desktop and other resources with web browser. There are three types of cloud services which are the following:
  • SaaS (Software as as Service) - The service provider build the software, and the end users can configure it depending on their needs but cannot change or modify the software.
  • Paas (Platform as a Service) - Platform will be offered to clients for different purposes. In PaaS, the storage space for user data may increase or decrease depending on the requirement of the applications.
  • IaaS (Infrastructure as a Service) - It offers infrastructure on demand which can be storage servers, applications and operating systems. When using IaaS, space, expenses and personnel required can be saved.
Here's a video to show an overview of what cloud computing is:
Advantages of Cloud Computing
Cloud computing has a lot of advantages which are the following:
  • Remote Accessibility - With cloud computing, services can be accessed from everywhere simply using your ID and password. Therefore it is not restricted to a particular location.
  • Security - Clouds are more secure than other models although people are uncertain. If something occurs, cloud offers backup and therefore less data will be lost. Also clouds are less prone to hacks and Distributed Denial of Service (DDoS) attacks because people will not know where the data is.
  • Easy Expansion - If one needs to expand, one can quickly access more resources.
  • Environmentally Friendly - It also reduces electricity expenses because you do not need to buy equipment to cool off computers and other components.

Disadvantages of Cloud Computing

Although cloud computing has advantages it also has some disadvantages:
  • Reliant on network connections - Cloud computing relies on network connections, that is, if the network will be running slow, the work will be running slow as well. Also if the network goes down, you have to wait until it will run again.
  • Expense - Although cloud computing will benefit from financial expenses, it will not be cheap if you will be using it on a smaller scale.
  • Legal Ownership of Data - As regards ownership of data, most providers have different terms and conditions. If the provider disappears, one has to check what happens when the data is lost and also check distribution rights.

Conclusion

Right now, people are still scared of cloud computing since everything is online and you can access it from anywhere. I think that in the future, people will start understanding what cloud computing really is and the majority of people will start using it.

References

http://www.brighthub.com/environment/green-computing/articles/10026.aspx
http://ezinearticles.com/?Disadvantages-of-Cloud-Computing&id=6151901

Friday, 8 July 2011

Week 19 - Social Networks

Time line of social networking

  • 1971 - The first email is sent, where the two computers where sitting next to each-other
  • 1978 - BBS (Bulletin Board Systems) started to be used where the exchanging of data was done over phone lines with other users
  • 1994 - One of the web's first social networking sites, Geocities, was founded.
  • 1995 - theglobe.com gave users the freedom to publish their own content and interact with users that have similar interests.
  • 1997 - sixdegrees.com was launched allowing the creation of profile and listing friends.
  • 2002 - Friendster was launched, where users could contact with other members and maintain those contacts. Also online content and media could be shared with those contacts.
  • 2003 - Myspace was launched
  • 2003 - a business-related social networking site named Linked-in was founded.
  • 2003 - hi5 has been launched
  • 2004 - Facebook was first launched at Harvard College, used to connect US college students launched, originally as a was of connecting US college students. More than half of the 19500 students signed up within the first month.
  • 2006 - Twitter was launched
  • 2008 - Facebook overtakes myspace as the leading social networking site.
  • 2011 - Google+ will be launched
Here's an interesting video on Social Media Revolution:

Google+

Google+ is a social networking service launched on the 28th of june 2011, where right now it is and invite-only testing phase. The following are features added in google+:
  • Circles - are used so that users can organize contacts into groups where other users can not view what the names of the circles are. Circles are ideal because u can share something only to that circle; therefore there will be more privacy.
  • Hangouts - are group video chat, where the maximum amount of people participating in a single Hangout is 10.
  • Huddle - is a feature available to SMS devices so that one can communicate through instant messaging within circles.
  • Instant Upload - will store photos and videos in a private album so that it will be shared later.
  • Sparks - is used to enable user to identify topics they might be interested in sharing with others.
Here's a quick look on Google+:

Conclusion

In my opinion, social networking is one of the best creation that one have ever made. Through social networking, you can connect with people you have not seen for a long time. Although google+ is still in the testing stage, during the lesson the majority of the class had the opportunity to join.

Thursday, 23 June 2011

Week 18 - Mobile Phone Web Development

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.

Saturday, 18 June 2011

Week 17 - HTML5, CSS3 & Javascript

As discussed in my last post, this week we started a new topic that is HTML5, CSS3 and Javascript, that is, the future.

HTML5

HTML5 is the next version of HTML, where new features have been added to replace scripting. HTML5 is not yet official and although browsers still do not have full HTML5 support, new HTML5 features are added in their latest versions. Some of the new features are:
  • A canvas tag have been added for drawing
  • A video and audio tag have been included for media
  • Content specific tags have been included such as header, footer, article, section and nav
  • New form controls have also been added such as calendar, time, date, email and search

<video> & <audio> Tags

To embed a video, an external plug-in such as Flash are used in HTML. In order to reduce the need for these plug-ins, the video and audio tags have been added to HTML5. To embed an audio and a video the following code is added, where the format I used for audio is '.mp3' (line 5) and the format I used for video is '.mp4' (line 2).
1:  <video width="320" height="240" controls="controls">    
2:     <source src="c.mp4" type="video/mp4" />  
3:  </video>  
4:  <audio width="320" height="50" controls="controls">    
5:     <source src="ab.mp3" type="audio/mp3" />    
6:  </audio>  
Output audio and video tag

When I tested out in Google chrome, they worked perfectly, but in Internet Explorer and Mozilla Firefox, these did not work. This might be the case that both Internet Explorer and Mozilla Firefox still do not support these tags.

Form controls

In the form tag, new input types have been added in HTML5 such as date, email, search and so on. With the use of these input types, there is more validation in the form, that is scripting for validation is also reduced. The following code shows some of these input types:

1:  <input class="fstyle" name="rname" type="text" size="20" required>  
2:  <input class="fstyle" name="remail" type="email" size="20" required>  
3:  <input type="date" min="1990-08-14" max="2011-06-14" value="1990-08-14"/>   
4:  <input type="text" x-webkit-speech />    

In lines 1 & 2, the form attribute required is added. This is used so that if the user leaves the text field empty and the submit button is clicked, a message that the field is empty will be displayed near the text field. In line 2, the e-mail input type is used. When using this input type, if the user enters something in the field that does not contain '@' and '.com', a message that it is not a valid email address will be displayed when the user clicks on the submit button. Another thing I found out is that there is also speech recognition using the text input type and x-webkit-speech as shown in line 4. I tried it out but it still needs improvement as I tried alot of words through the microphone but the output was not as expected.

Form Controls

CSS3

CSS3 is the latest standard of CSS, where new features have been added, to make the styling of the web page more interesting.

Text Effects

word-wrap and text-shadow are two new features in CSS3. In the word-wrap text property, the text will wrap, that is if the word is too long, it also splits in the middle of a word. The text-shadow text property specifies the horizontal shadow, the vertical shadow, the blur distance and the color of the shadow.
1:  <html>  
2:  <head>  
3:  <style type="text/css">  
4:  h1  
5:  {  
6:    font-family: arial;  
7:    text-shadow: 2px 1px 1px #0000FF;  
8:  }  
9:  </style>  
10:  </head>  
11:  <body>  
12:  <h1>Stephanie Vella</h1>  
13:  </body>  
14:  </html>  
In the above code, line 7 shows the text-shadow property, where the horizontal shadow is 2px, the vertical shadow is 1px, the blur distance is 1px and the color of the shadow is #0000FF (blue).
Text Shadow Output 

Animation

Also in CSS3 one can create animations using the @keyframes rule. In the code below, the initial background colour will be blue (line 8). Lines 19 - 22 shows that at 25% the colour will be turned into green, at 50% the colour will be turned into yellow and at 100% the colour will be turned into red, using the @keyframes rule. It will take 10 seconds to change from one color to the other using the animation property (line 9). Web browsers Safari and Chrome require the prefix -webkit.
1:  <html>  
2:  <head>  
3:  <style type="text/css">   
4:  div  
5:  {  
6:     width:185px;  
7:     height:60px;  
8:     background: blue;  
9:     animation:myan 5s;  
10:    -webkit-animation:myan 5s;   
11:  }  
12:  h1{  
13:    font-family: arial;  
14:    font-size:20px;  
15:    padding:20px;  
16:  }  
17:  @keyframes myan   
18:  {  
19:    0%  {background:blue;}  
20:    25% {background:green;}  
21:    50% {background:yellow;}  
22:    100% {background:red;}  
23:  }  
24:  @-webkit-keyframes myan   
25:  {  
26:    0%  {background:blue;}  
27:    25% {background:green;}  
28:    50% {background:yellow;}  
29:    100% {background:red;}  
30:  }  
31:  </style>  
32:  </head>  
33:  <body>  
34:    <div><h1> Stephanie Vella<h1></div>  
35:  </body>  
36:  </html>  
Animation

Selectors

Selectors
Selectors in CSS are used to select which elements should be styled. For example in the following code line 4 selects every ol element that is preceded by a p element, therefore lines 17-22 will have a background colour of #9263fa.
1:  <html>  
2:  <head>  
3:  <style type="text/css">   
4:  p~ol  
5:  {  
6:    background:#9263fa;  
7:    width:60px;  
8:  }  
9:  </style>  
10:  </head>  
11:  <body>  
12:  <ol>  
13:   <li>Java</li>  
14:   <li>PHP</li>  
15:   <li>ASP</li>  
16:  </ol>  
17:  <p>List</p>  
18:  <ol>  
19:   <li>Java</li>  
20:   <li>PHP</li>  
21:   <li>ASP</li>  
22:  </ol>  
23:  </body>  
24:  </html>  
For more selectors one can look at http://www.w3schools.com/css3/css3_ref_selectors.asp

Javascript

There are also new features added in Javascript, such as web storage, web SQL storage, Offline Application cache, web workers and web sockets. I will be discussing on two new features; Web Storage and Web SQL Database Storage.

Web Storage

Web storage is an improvement of cookies, but falls under client-side scripting. The following code shows the count of how much you have visited that page. If the page will be refreshed, the counter will increase. Also if you close the browser and open again, the counter will continue. This is done using the localStorage object, where data is stored having no time limit. When using sessionStorage object, data will only be stored for one session.
1:  <!DOCTYPE HTML>  
2:  <html>  
3:  <body>  
4:  <script type="text/javascript">  
5:  if (sessionStorage.visitcount)  
6:       {  
7:       sessionStorage.visitcount=Number(sessionStorage.visitcount) +1;  
8:       }  
9:  else  
10:       {  
11:       sessionStorage.visitcount=1;  
12:       }  
13:  document.write("Visited " + sessionStorage.visitcount + " times");  
14:  </script>   
15:  </body>  
16:  </html>  

Web SQL Database Storage

Another feature of Javascript in HTML5 is Web SQL Database Storage, where the database can be accessible from JavaScript. The code below is used to create a new table named 'Table1Test', creating a new record, update records, delete records and to delete a table.
1:          function createTable() {  
2:          db.transaction(function(tx) {  
3:           tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],  
4:             function(tx) { log.innerHTML = '<p>"Table1Test" created!</p>' },  
5:             onError);  
6:          });  
7:         }  
8:         function newRecord() {  
9:          var num = Math.round(Math.random() * 10000); // random data  
10:          db.transaction(function(tx) {  
11:           tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value],  
12:             function(tx, result) {  
13:              log.innerHTML = '';  
14:              showRecords();  
15:             },   
16:             onError);  
17:          });  
18:         }  
19:         function updateRecord(id, textEl) {  
20:          db.transaction(function(tx) {  
21:           tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);  
22:          });  
23:         }  
24:         function deleteRecord(id) {  
25:          db.transaction(function(tx) {  
26:           tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id],  
27:             function(tx, result) { showRecords() },   
28:             onError);  
29:          });  
30:         }  
31:         function dropTable() {  
32:          db.transaction(function(tx) {  
33:           tx.executeSql("DROP TABLE Table1Test", [],  
34:             function(tx) { showRecords() },   
35:             onError);  
36:          });  
37:         }  
Transactions are used to rollback, that is, if a transaction fails the updates will not be done, it will be as if the transaction never happened. The '?' are used as placeholders where it will get the data depending on the user input. For example in line 26, if we want to delete the record 'CMT3313', it will check for the id and the '?' will be replaced with '7892'. Line 3 shows the statement to create the table, line 21 shows the statement to update the table, line 26 shows the statement to delete from table and line 33 shows the statement to drop the whole table. In the newRecord() function (lines 8-18), records with random values will be added to the tables, and the insert statement will be used as shown in line 11.

Web SQL database
Chrome's Developer Tools

Conclusion

As you can see, although HTML5 and CSS3 are not yet fully released, one can still see how alot of work will be reduced with these new features, and I am sure that as time goes by more interesting new features will be added. If you want to know more about HTML5, CSS3 and Javascript, you can go to this link http://slides.html5rocks.com, which consists of a presentation that have been created using HTML5.

Monday, 13 June 2011

Week 16 - Linden Scripting Language 3

This week was the last week where we talked on second life. We concluded this topic and discussed what we could to in the next weeks. In this post I'll be discussing three scripts that can be used in second life: teleporting, sending email and loading URL.

Teleporting

First, the target coordinates have been inserted, using a variable of type vector as shown in line 1. The llSetText() function shown in line 4 is used to display text on the object, where "Teleport" is the text displayed and <0,1,0> is the text colour (where in this case, it is green). The llGetRot() function will return the rotation of the avatar. The llSitTarget() function consists if a vector offset and rotation. In this case I did not want the avatar to sit down after teleporting; therefore the llUnSit() function shown in line 9 is used.
1:  vector target=<200,200,27>;  
2:  default{  
3:    state_entry(){  
4:      llSetText("Teleport",<0,1,0>,1);  
5:      llSetSitText("Teleport");  
6:      llSitTarget(target * (ZERO_ROTATION / llGetRot()),ZERO_ROTATION / llGetRot());  
7:    }  
8:  changed(integer change){  
9:    llUnSit(llAvatarOnSitTarget());  
10:    }  
11:  }  

Sending Email

The following script is used so that when the avatar touches the object, an email will be sent to me:
1:  string email_address = "vella.stevie@gmail.com";   
2:  default  
3:  {  
4:    state_entry() {  
5:      llEmail( email_address, "Second life", "Testing email" );  
6:    }  
7:    touch_start( integer num_detected ) {  
8:      integer i = 0;  
9:          do  
10:      llEmail( email_address, "Object Sender", llDetectedName(i) + "touched the object" + "\nKey: " + (string) llDetectedKey(i) );  
11:      while(++i < num_detected);  
12:    }  
13:  }  
In line 1, a variable of type string is declared, where the email address of the receiver will be typed, in this case, it is my email address. The llEmail() function, shown in line 5 consists of the email address, the subject and message. This will be sent to me and the subject is "Second life" and the message is "testing. This will be sent each time a new state is entered.
First Email
When the object is touched, another email will be sent, but this time in the message, it will show you who touched the object, using the llDetectedName() function and also returns the key of the object, using the llDetectedKey() function.
When Object is Touched

Loading URL

Another thing which you can do in second life is interacting with the web, using the llLoadURL() function when the avatar touches the object. When using this function a dialog will be shown to the avatar, in this case to load the web page http://stevie-89.blogspot.com, which is this blog with message "view stevie's blog".
1:  default  
2:  {  
3:    touch_start(integer total_number) {  
4:    llLoadURL(llDetectedKey(0), "view stevie's blog", "http://stevie-89.blogspot.com/");  
5:    }  
6:  }  
Loading URL

Conclusion

In the next weeks new topics will be introduced in class. These new topics will be HTML5, JavaScript, CSS3, mobile web development, facebook development, custom PHP libraries, cloud computing and web security.

Sunday, 5 June 2011

Week 15 - Linden Scripting Language 2

This week, more Linden Scripting Language have been done during the lecture, where the different types of variables have been explained and more examples on what scripting can be done in second life was given.

Variables

Linden Scripting language is a strongly typed language; variables must be declared by type. The following are the types if variables used in LSL:
  • Integer - is a whole number
  • Float - is a decimal number
  • String - is a sequence of characters
  • Key - is used to identifysomething in second life
  • Vector - are three floats that are in the form <x, y, z>
  • Rotation - is made up of four floats <x, y, z, s>
  • List - a list of other data types that are heterogeneous

Counter

A simple task I did to experiment with variables is creating a counter, where variable cnt is being used:
1:  integer cnt;  
2:  default  
3:  {  
4:    state_entry()  
5:    {  
6:      cnt = 0;  
7:    }  
8:    touch_start(integer total_number)  
9:    {  
10:      cnt ++;  
11:      llSay(0, "Count: " + (string)cnt);      
12:    }  
13:  }  
In the above code, the initial value of the counter is set to zero as shown in line 6. In the state_entry() function, the variable cnt is set to zero and each time the object will be touched, the touch_start() function will be called. The variable will then be inecremented and displayed. In order to display the variable, type casting is used to convert to string. Below shows the result when the object will be touched.

Sitting

I also built a static object which is a chair that allow the avatar to sit properly. That is, instead of 'right click' and and select the 'Sit Here' command, a script have been created. Three variables of a float type as shown in lines 1-3 have been declared, where together they make up a vector. The llSitTarget() function is used to make the avatar sit down, where it consists of a vector offset and rotation (line 8). The llSetSitText() function is used to display an alternative text insted of the default 'Sit Here', when you right click. At first the avatar was not sitting properly one the chair, but after a while playing around, I managed to make the avatar sit properly. One thing I had to change is the values of the x, y and z. When the value of x is increased or decreased, the avatar sits on the object forward or backwards. When the value of y is increased or decreased, the further left or right the avatar sits on the object. When the value of z is increased or decreased, the avatar sits higher or lower on the object. Another thing I had to do was to rotate the avatar to 90 °, where I had to use the llEuler2Rot() function as shown in line 8.
1:  float x = 0;                 
2:  float y = 0.3;   
3:  float z = 0.3;  
4:  default  
5:  {  
6:    state_entry()  
7:    {  
8:      llSitTarget(<x,y,z>,llEuler2Rot(<0,0,90> * DEG_TO_RAD));  
9:      llSetSitText("Sit Av");  
10:    }  
11:  }  
Avatar Sitting

Sunday, 29 May 2011

Week 14 - Linden Scripting Language

The first thing we did during this lecture is adding all the class mates as friends and we all met in a place called 'Fermi Sandbox'. We went in this place because we have permission to build object in this land; in a sandbox you can build objects freely. Sandboxes are usually cleaned every four hours. There are places where you are not to build objects.

Building Objects in Second Life

As I have mentioned in the previous blog, a prim is a 3D shape which can be linked to form shapes either larger or smaller sizes.

To start building, right click on the ground and select 'Build'. A 'Build Toolbox' will appear on screen and the mouse cursor will be turned into a magic wand so that you can click on the ground and a plywood looking shape will be created. Using this toolbox, you can move the shape, rotate (Ctrl), stretch (Ctrl+Shift) and Select face. You can also do this using the X, Y, Z coordinates found in the 'Object' tab using, 'Position (meters)', 'Size (meters)' and 'Rotation (degrees)'. The material of the object can also be chosen; whether Stone, Metal, Glass, Wood, Flesh, Plastic or Rubber. Various shapes can be chosen; such as Box, Cylinder, Prism, Sphere, Torus, Tube, Ring or Sculpted. In the 'Texture' tab, you can add texture, color, transparency and glow to the object. If you have created multiple objects and would like to join them together, you can use the 'link' tool, either from 'Build -> Link' or using (Ctrl+L).
Build Toolbox
Linden Scripting Language
When scripting in second life, you always have to start with the 'default' keyword. The default word is used to specify the name of the state that the code enclised belongs to. The following is a script that is generated automatically by second life when a new script is created:
1:  default  
2:  {  
3:    state_entry()  
4:    {  
5:      llSay(0, "Hello, Avatar!");  
6:    }  
7:    touch_start(integer total_number)  
8:    {  
9:      llSay(0, "Touched.");  
10:    }  
11:  }  
The state_entry() event takes place each time a new state is entered. Using llSay(), whenever the script is saved or reset, "Hello, Avatar!" will be written in the chat pop up and "Touched" will be written in the chat pop up when touched using touch_start() event.

I modified the above code so that when the object will be touched it will be turned into one colour and when the object is touched again, it will be turned into another colour as shown in lines 1-24.
1:  default  
2:  {  
3:    state_entry()    
4:    {  
5:      llSay(0, "turning on!");  
6:      llSetColor(<1.0, 0.0, 1.0>, ALL_SIDES);  
7:    }  
8:    touch_start(integer total_number)  
9:    {  
10:      state off;  
11:    }  
12:  }  
13:  state off  
14:  {  
15:    state_entry()  
16:    {  
17:      llSay(0, "turning off!");  
18:      llSetColor(<0.0, 1.0, 0.0>, ALL_SIDES);  
19:    }  
20:    touch_start(integer total_number)  
21:    {  
22:      state default;  
23:    }  
24:  }  
In the above code, when the object is turned on, it will turn into pink from all sizes and when the object is turned off, it will turn green.
Object turned off

Object turned on

Conclusion

I also did a but of a research of what can be built in second life. From what I found, you can build anything you want; houses and vehicles such as cars, boats and planes and a script can be attached to a vehicle, to make it move. Something I found interesting is the choice of material; for example the wheels of a car should be made up of glass, because glass is a material with the least friction. I am looking forward for the next lessons to see what more can second life offer.

Sunday, 22 May 2011

Week 13 - Introduction to Second Life

This week a new topic known as 'Second Life' have been introduced in class.

What is Second Life?

Second life is an online virtual world where a user can fly, meet other people and go to various destinations.

Second Life Basics

The following are names that are being used in second life:
  • Sim - Also known as Region is a 256m x 256m area found on the map, running on a simulator. A sim can be broken down into areas which are called 'parcels' and can contain a specific number (usually 15000) of objects, known as 'prims'.
  • Parcel - A parcel is an area of land which will be owned by a user or group, which is a minimum of 16m2 and maximum of 65,536m2, all within one region. Parcels are made up of square blocks measuring 4m x 4m
  • Prim - A prim is a 3D shape which can be linked to form shapes either larger or smaller sizes. Texture, colour and various other attributes can be added to it
  • Estate - is a collection of regions with a particular set of rules being shared
  • Avatar - is a representative of the user in the virtual world

Using Second Life

The first thing I did is downloading the Second Life Viewer. You can download on http://secondlife.com/support/downloads/. Then an account will be created and an Avatar will be chosen. When you log in for the first time you will start on an island called 'Welcome Island'. This island is designed to teach the users the basics of Second Life, such as walking, zooming with the camera, flying, sitting/standing, chatting and teleporting. Once you go to another destination, you cannot teleport back into the 'Welcome Island'.

Second Life Controls

When I logged in for the second time, I chose the 'Advanced mode', so that I can make use of a lot of tools. At the bottom there are the following tools


  • Gesture - In general, a gesture is a sort of non-verbal communication that include movement of the face, hands and other parts of the body. In second life, an avatar can do a lot of gestures such as '/bow', '/clap', '/muscle' and '/laugh'. Gestures can also be written in the chat text box.
  • Move - In the move tool, you can set the avatar into three modes 'Walking Mode', 'Run Mode' and 'Flying Mode'. A shortcut for flying is using the keys 'PgUp' and 'PgDn'.
  • View - The view tool helps the users move the camera around. For example you can zoom in and out and set the camera position to 'Rear View', 'Front View' and 'Size View'.

Teleporting

Another thing which you can do in second life is going from one place to another, known as 'teleport'. To teleport, you can either search for destinations using the keyboard shortcut 'Ctrl + F' or else by going to 'World' -> 'Search'. Apart from this, if you would like your friend to join, you can offer teleport to your friend into that destination.

Destinations Visited

  • Middlesex University
  • The first destination I went after the 'Welcome Island' is 'Middlesex University'. I went to this destination first because I thought that since I'm taking a 'Middlesex University' course, I might meet people that are doing the same module; at first no one was there. When I tried another time, there where people that not only are taking this module, but also are in my class. 
Middlesex University
  • Munich Germany
  • I also visited Munich, the capital city of Bavaria in Germany. Since the city contains alot of buildings and alot of avatars, it took quite some time to load. I was curious if Munich in second life was going to be like the real Munich (as in interesting buildings). I searched for the 'Townhall' and 'Frauenkirche', which are two known buildings. I was surprised when I found them in second life. Another thing I liked in second life is the 'snapshot' tool. Generally when we visit an interesting building we take a picture either of the building alone or of the person in front of the building. In second life you can do this as well; in addition you can fly and take the shot from a different angle.
Munich - Townhall
Munich - Frauenkirche

My Inventory

My Inventory is a place where all my things will be gathered such as clothes, houses, furniture, cars and so on.

My Appearance

In the 'Wearing' tab, everything you are wearing will be shown and the 'My Outfits' tab is used to switch between outfits.

Conclusion

What I liked in second life is that I can go from one place to another, explore new things and meet with various people. I think that in future second life will be used for everything, to learn instead of going to the campus, to meet friends and so on. On the other hand I think that if everything will be through second life, the user will be sitting infront of the PC all day and night and will not continue to explore the real life.

Thursday, 28 April 2011

Coursework2 - Building a Web Space Management System

In this blog post, I will be discussing about my experience in building a web space management system where the user can register, login, upload files, delete files, create directories and delete directories.

SQL Injection

SQL injection is a security vulnerability which occurs in the database. An SQL injection may occur when the input of the user is not for filtered escape characters. A method to avoid SQL injection is by using the mysql_real_escape_string() function, as shown in lines 25-26. For more details on SQL injection one can look at http://php.net/manual/en/security.database.sql-injection.php
23:  $user = $_POST["username"];  
24:  $pass = $_POST["password"];    
25:  $user = mysql_real_escape_string($user);  
26:  $pass = mysql_real_escape_string($pass);  

Registration

This page is used so that a user can register to create an account by inserting the username, email and password into a form. The user will retype the password to confirm the password created. When the user presses the ‘Register’ button, the username, email and password will be inserted into the database. The code to insert into the database is inserted into another file ‘register.php’. In this page, a connection to the database was done, as described in the previous post and an insert statement have been created.
42:  $sql="insert into users (name,email,password)values('$rname', '$remail', '$rpass1')";  
If the data is invalid or the passwords do not match, it will be redirected to the registration page.

Login

The login page consists of a form 'login.php' where the user will insert the username and password. The data of the form will be submitted to 'loggedin.php'.
22:  <form action="loggedin.php" method=post>  
An explanation about the login page has been written in the previous three posts. Once the user is logged in, the user can create and delete directories, upload files and delete files. This is how the logged in page looks like:

Logged in Page

Creating Directories

To create a directory, a form has been created where it will be submitted to the php file 'dir.php'. The form consists of a text field and a submit button, whereas the php file consists of the function mkdir(), to create the directory.
41:  if (!mkdir($create)) {  
42:    die('Failed to create directory');  
43:  } else {  
44:    echo "Directory Successfully Created";  
45:  }  
Lines 41-45 shows that if the directory cannot be created (!mkdir($created)), a message that the creation of the folder is failed will appear, otherwise a message that the directory is created will appear, and the directory will be created.

Uploading Files

The page loggedin.php, also consists of a form where the user can upload files. Once the files is uploaded, the details of the files (the file name, file type and file size) will be appeared on the page, using the following code:
69:   move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],   
70:   "C:/xampp/htdocs/assignment/$user/" . $_FILES["fileToUpload"]["name"]);  
71:   echo "File Uploaded:" . $_FILES["fileToUpload"]["name"]."<br>";  
72:   echo "File Type:" . $_FILES["fileToUpload"]["type"]."<br>";  
73:   echo "Total size : ".$s."<br>";  
The files uploaded will be saved in a temporary folder, but the file can be moved into another folder using the function move_upload_file(), where the file to be moved and the new location will be specified, as shown in line 30.

Delete Files and Directories

The 'loggedin' file also contains a list of files and directories inside a particular folder. Near each item (file and directory), a checkbox have been created so that when the checkbox is ticked and the delete button is clicked, the file or directory will be deleted. This was done using the unlink() function to delete files and using rmdir() function to delete directories.
1:  if (is_file($myFile)){  
2:    unlink($myFile);  
3:    echo "File $myFile successfully deleted <br>";    
4:  } elseif (is_dir($myFile)) {  
5:    rmdir($myFile);  
6:    echo "Directory $myFile successfully deleted <br>";  
7:  }  

Users only able to access their Own Space

For users to access only their space, a directory (folder) was created for each user, where the name of the folder is the same as the username, and the username is unique for each user. In this case, the usernames are all different, and a folder is created manually.
88:    if ($handle = opendir("./$user")) {  
89:      //code  
98:    }  
Line 88 shows that when the user logs in, a folder will be opened depending who the user is. As a future improvement, I thought that when the user registers, if the name already exists, the user will have to register with another name. Also, when the user registers, a folder will be created automatically, according to the user's username using the mkdir() function.
 mkdir($user);  

Space Limits

The code below shows what it should do when the size exceeds. The getDirectorySize() function is a function which was created to get the size of the directory. If the size of the directory is larger than 52428800 bytes, a message that the size have exceeded will be displayed.
46:  $path="C:/xampp/htdocs/assignment/$user/";  
47:  $dirsize=getDirectorySize($path);
48:  $s1=$_FILES["fileToUpload"]["size"] ;
49:  $s=$dirsize['size'];
50:  $s2= $s+$s1;
51:  if ($s2 > 52428800){
52:    echo "Size exceeded";    
53:  }
When I tested it I found out that the size of the uploaded file will be incremented after uploading the next file or else after refreshing the page. That is, if the size will be exceeded in the previous file, that file will be uploaded, but for the next file it will display that the size have exceeded and the file will not be uploaded. To overcome this, I had to add the code found in lines 48 and 50. The following line of code is found inside the getDirectorySize() function.
38:  $totalsize = filesize($nextpath) + $totalsize;  

When Size Exceeds

Problems Encountered

One problem which I had when creating this system is when I used the unlink() function to delete files. When I clicked on the delete button, all the files inside that folder were deleted, both when ticking on the checkboxes and when leaving them unticked.
The problem was when creating the form to include the checkboxes in the list. At first, I created a form using html, but in order for this to work, this has to be created using php.
88:    if ($handle = opendir('./$user')) {  
89:      $i=0;  
90:      while (false !== ($file = readdir($handle))) {  
91:      if ($file != "." && $file != ".." && $file != "delete.php") {  
92:      echo "<input type=\"checkbox\" name=\"deletefile[$i]\" value=\"$file\" />";  
93:      echo "<a class=\"alog\" href=\"upload/\".$file>$file</a><br>\r\n";  
94:      $i++;  
95:        }  
96:      }  
97:      closedir($handle);  
98:    }  
A variable 'i' is declared, with the value of 0 assigned to it as shown in line 89. In the input tag of the form (where the type is checkbox), the name consists of an array (deletefile[$i]), where the value of $i is incremented, each time an item is added, to add a checkbox using the while loop. More details on http://www.hotscripts.com/forums/php/31146-deleting-multiple-files-using-checkboxes.html

The opendir() function (line 88) is used to open a directory handle. The readdir() function (line 90) is used to read from a directory handle. The closedir() function (line 97) is used to close a directory handle.

Another problem which I had was when deleting a directory. When I deleted a file, the file was successfully deleted, but when I tried to delete a directory, it gives me an error that the permission is denied. This was because I was using the unlink() function, both to delete a file and also to delete a directory. To delete a directory, the function rmdir() should be used.

Some of the files contain a "Back to previous page" button, where the user can go back to the previous page. Every time the user has to click on this button, the page should be reloaded.

Testing on a mobile

The system have also been tested on my mobile (Nokia 5800), which supports wifi. Since the webspace management system is hosted locally, it can be viewed from another computer (in this case my mobile), by using the IP address. When I styled this, I gave the div container a width of 700px , but when I looked on my mobile, I had to scroll from left to right. Therefore, I changed the width of the container to percentage (%) instead of pixels, to fit to screen as shown in line 35:
34:  #container {  
35:       width: 80%;  
36:       margin: 0px auto;  
From my mobile, I also registered, logged in, uploaded files, created directories, deleted directories and deleted files. One thing I found out when testing on my mobile is that the alert box 'Invalid Username/password combination' will appear when the 'Back to Previous Page' button is clicked. This might be because the mobile phone does not support javascript. Instead, the browser's back button can be used.

Uploading files from mobile to computer is another alternative to transfer files, instead of using Bluetooth or a USB cable.

References

http://www.hotscripts.com/forums/php/31146-deleting-multiple-files-using-checkboxes.html
http://php.net/manual/en/security.database.sql-injection.php
http://www.go4expert.com/forums/showthread.php?t=290

Wednesday, 20 April 2011

Week 9 - More PHP (Databases)

During the last lesson, we learned more on PHP, this time using databases.

Database

A database is used to store data, using tables. The following are SQL commands which are commonly used:

CREATE – to create tables within the database
INSERT – to add data inside the tables
SELECT – to view data
DELETE – to remove data
UPDATE – to modify data
DROP – to delete tables

PHP and MySQL

In PHP one can interact to a database using the mysql_connect command:
 mysql_connect(server, username, password)  

Lab Session

During the lab session, the following tasks have been given:
  • Log into the SQL server using command line and perform some commands such as listing the databases
  • Attempt to connect to SQL by using PHPMYADMIN
  • Create a database that stores usernames and passwords
  • Modify your PHP program from the previous lab session to connect to the database to authenticate the user

Logging into the SQL server

To log into the the SQL server using command line:
  1. Open command line prompt
  2. Then if you have C:\Users\Name write cd ..\..\
  3. Then the foldercd C:\XAMPP\mysql\bin was opened and the command mysql -u root -p and the datapase password have been entered.
  4. To show a list of databases, the show databases; command have been inserted.

phpMyAdmin

phpMyAdmin is used to administer MySQL over the web.

phpMyAdmin

Creating database

A database that stores usernames and passwords have been created, where I used a GUI Tool named Workbench.
1:  create database `usersdatabase`;  
2:  DROP TABLE IF EXISTS `usersdatabase`.`usertable`;  
3:  CREATE TABLE `usersdatabase`.`usertable` (  
4:   `UserID` int(10) unsigned NOT NULL AUTO_INCREMENT,  
5:   `UserName` varchar(45) NOT NULL,  
6:   `Password` varchar(45) NOT NULL,  
7:   PRIMARY KEY (`UserID`)  
8:  );  
Records have been inserted into the database using the INSERTcommand. To view data, the SELECT command is used.

Modification of PHP program

In the previous post, an associative array was created to store the usernames and password. In this post, a database have been created to store the usernames and password.
To connect to the database the php code shown in lines 12-13 is used
12:  $con = mysql_connect("localhost","root","");  
13:  mysql_select_db("usersdatabase", $con);  
If the connection from the database will fail, the code shown in line 17 is used
17:  die('Could not connect: ' . mysql_error());  
Lines 20-24, a variable named $result is used to execute a query to select from the table where the username and password will be what the user inserted in the form. Line 21 will calculate the number of rows the $result variable has. If the result is not zero, a welcome message will appear. If the user checks on the 'Remember Me' checkbox, a cookie will be created. If the username and password does not match and alertbox that it is invalid will appear.
20:  $result = mysql_query("SELECT * FROM usertable where UserName=\"$user\" and Password=\"$pass\"");  
21:  $row = mysql_numrows($result);  
22:  if($row !=0)  
23:  {  
24:  echo ("Welcome $user");  
The rest of the code is the same as found in the last post. In my next post I will be discussing about MySQL injection and about the next coursework.

Sunday, 10 April 2011

Week 8 - More PHP

In this week's lecture, cookies and sessions in PHP have been introduced

An html page (login2.html) has been created which consists of a form where a user can enter the username and password in the fields.
1:  <form action="login.php" method=post>  
Action is used so that the submit button can send data to a server. Then the data is sent to the page specified, which is “login.php”. Methods “post” and “get” are used to specify how to send the data of the form. “Post” is more secure than “get”, because “get” adds the data to the URL.

The isset() function checks whether the variable given exists or not. The $_POST function will collect the form data. In lines 6 and 7, variables $user and $password have been declared.
6:  $user = $_POST["username"];  
7:  $pass = $_POST["password"];
An associative array has been created to store the values of the username and password. Line 13 will check whether the username and password that the user inputs are correct. If it is validated, that is, the username and password matches from the associative array, a welcome message with the username will be appeared.
12:  $pswd = array("Stephanie"=>"password1", "John"=>"password2", "Mary" =>"password3", "Joe"=>"password4", "Alesha"=>"password5");  
13:  if(isset($pswd[$user])) if($pswd[$user]==$pass) $validated = true;  

When the username and password do not match, the “login.php” page will be redirected to “login2.html”, using the below line of code.
26:  header("Location: login2.html");  
I wanted that an alert box will appear first which will say “Invalid User Name/Password Combination”. This could not be done when using header (“Location: login2.html”). This was achieved using JavaScript’s alert() function and window.location, as shown in lines 27-28
27:  echo "<script type=\"text/javascript\">alert('Invalid UserName/Password combination');".  
28:     "window.location = 'login2.html'</script>";   

Cookies

A cookie is used for user identification. It is used to store user preferences, which must be encrypted. To create a cookie, the setCookie() function is used, which consists of parameters 'name', 'value' and 'expire'.

Cookies have been created both for the username and password, where the expire time is set to 3600 (which will expire in one hour). To delete a cookie, instead of +3600, -3600 should be inserted.
16:  setcookie("username", $user, time()+3600);  
17:  setcookie("password", MD5($pass), time()+3600);   
For the password, a cryptographic Message Digest Algorithm (MD5) is used.

Without MD5

With MD5

To retrieve a cookie value, $_COOKIE is used:
2:  $user = $_COOKIE["username"];  
3:  $pass = $_COOKIE["password"];  
4:  echo "WELCOME $user";

cookie in phpinfo() report

Welcome $user

After 1 hour

Sessions

Sessions are used to maintain persistent data between pages throughout a Web site. To start up a session, the following function needs to be inserted before the html tag:
1:  <?php  
2:  session_start();  
3:  ?>  
For storage and retrieval of session variables, the $_SESSION variable is used
6:  $_SESSION["username"]= $user;  
7:  $_SESSION["password"]= $pass;  
8:  echo "Username=". $_SESSION["username"]."<br/>";   
9:  echo "Password=". $_SESSION["password"];   
To destroy a session, both the unset() function and session_destroy() function can be used.
13:  unset($_SESSION["username"]);  
14:  session_destroy();