Sunday, 26 June 2011

Week 16 - Mobile Phones

Introduction 
This week's lesson was about mobile phone web development.In my opinion the word mobile phone has lost its original meaning as "mobile phone" is suppose to be gadget which allows a person to communicate with another person even being miles away and in different countries by the click of a button. Nowadays when people hear the word mobile phone what they mean is having in their hands the smallest gadget available, having internet connection, with a lot of applications, e-mails, facebook, games messaging, gps and any other possible feature. When mobile phones where introduced these were bigger in dimensions, probably having one in this century everyone would laugh. However people having those types of mobile phones in the past years where considered to be well off people or people having high positions at their work place.  Nowadays nearly everybody owns a mobile phone, some people even own more then on phone for instance they have two one which is for personal use and an other one for work. Also since they always want to improve quality and technology now there are dual-sim phones (phones having two sim cards)

Technology is making a point that everything will advance and be of better usage. Mobile phones now incorporated web development, making phones able to have different applications. To make good usage of websites on phones you need to have a website that is supported on phones and is easy to use without letting the user scroll to much. Applications are being made with java, javascript and also C. There are different types of mobile phones each having different brands and running different systems. Several types of phones are Apple, Nokia, Samsung, Sony Ericson, BlackBerry, Motorola, LG, HTC and many more. Also there are different type of browsers like focus, cursor, touch and multitouch browsers.

Below are certain platforms that smartphones can run on.

Microsoft - Certain phones that used this platform are Nokia, Motorola, Samsung and LG. People can now also have windows on their phone not only on their PC.

Apple - Used buy Iphones, which now a days is pretty much popular.

Android - HTC, Samsung, Sony Ericsson. Android is competing with Apple. Personally I used both Iphones and Android and for my tastes androids are on a higher scale at the moment. Android are open source.

The above platforms all use different browsers like Opera, Firefox, Android, Mozilla Firefox and others.

Coursework
This week's coursework is about an application that had to be created on a smartphone which is the geographic location. I will be doing this test on an android system.  The geolocation is a web application that one can access from his phone in order to determine his or her geographical location using longitude and latitude . Using this application will help you out where ever you are in the word. Getting lost when you are abroad is no longer an option! Below is the code that was used for the geolocation.

For starters i downloaded a mobile emulator from http://www.opera.com/developer/tools/mobile/ which allows you to test and preview web sites from your computer as if you are viewing them from your smartphone. When this application opens up, you have some settings which you can set according to your likings. You can set the profile to what phone you want and if the phone you will be using is not in the list you can edit using the custom button.



Below is the code used for the geolocation. 

1.  <html>
2.  <head>
3.    <title>Geolocation</title>
4.  </head>
5.  <body>
6.  <script type="text/javascript">
7.  navigator.geolocation.getCurrentPosition(userLocated, 8. locationError)
9.  function userLocated(position){
10.
11.    var lat = position.coords.latitude;
12.    var long = position.coords.longitude;
13.    var timeOfLocation = position.timestamp;
14.    document.write(lat + "<br/>");      
15.    document.write(long + "<br/>");
16.    document.write(timeOfLocation);
17.  
18.  }
19.  function locationError(error){
20.    alert(error.code);
21.  }
22.  </script>
23.  </body>
24.  </html>



Two important functions are seen here shown on line7:

userLocated() function - This function is used so that the current position of where the person currently is can be achieved.
locationError() function - This function is only used when there is an error. There will be an alert that there is an error
Then on lines 11 to 13 the variables are being declared for longitude, latitude and timestamp while lines 14 - 16 are being displayed.

At first when trying to make this attempt it failed. As on my phone I wasn't seeing anything but then I realized it was only because I didnt have any thing being displayed. Then I used the document.write and the longitude and latitude were displayed as shown below.


Conclusion
Mobile development is a huge improvement seeing a huge amount of people that cannot live without their mobile phone is a huge impact. When a few years back this never crossed peoples mind or people taught that most things we have today are impossible. I do sometimes think how would my life be without all this technology  and gadgets and did gadgets affect my life and others around me? The most obvious answer is yes it did. And another question that we would all have to wait for an answer is, How is the future of mobile technology going to evolve.
Posted by at No comments:

Monday, 20 June 2011

Week 15 - HTML5, CSS3, Advanced Javascript

Overall Introduction
From this week onwards lessons will be held on any technology of our choice as long as it is useful to us students and that we can gain from. Since technology is evolving and changing by the days it is very important to keep up with them, if you want to always keep up with new technology. 
Introduction of HTML5
The word HTML as we have seen in previous blogs stands for Hyper Text Markup Language, which is a programming language used for developing websites. HTML4, the one we are most familiar with was standardized in 1997. Since technology is improving everyday now we have HTML5 which is a new generation, a more enhanced, a fifth generation of the original language which was introduced in 1990.  HTML has been going on for a long time however HTML4 was now lacking on certain things as it struggled when it came to keep up with certain add-ons like Microsoft Silverlight and Adobe Flash therefore it needed room for improvement and that's  where HTML5 came in handy.  HTML5 started out the when Hypertext Application Technology Working Group and the W3C decided to move forward together to boost up technology as in fact happened. Browsers have to be update to adopt these new enhancements.For users to get these improvments one has to be updated with new releases to adopt these new standards although by updating browsers is not enough as users using old versions of browsers have to be willing to upgrade newer versions of browsers. 

Interesting sites
Two very interesting and useful sites are the following: http://html5test.com/ - From this site one can check how well HTML5 is supported on the browser you are using. For example Google Chrome scored 291 points and you can see which specifications scored least and most. Internet Explorer on the other hand scored only 32 points out of 400 which is really bad. Another useful  site is http://www.findmebyip.com/litmus/ this is a browser compatibility guide.


New Elements
As improvement HTML5 introduced several new elements which will help and will make life easier for developers when coding. These are some of the new elements which are added more elements can be found on http://www.w3schools.com/html5/html5_new_elements.asp





For starters the new doctype for HTML5 is <!DOCTYPE html> you will need this if you want to make use of HTML5, with this snippet of code one will be able to make use of XHTML or HTML in strict mode. Going down to the head section, this has been simplified for instance the <meta> tag has been improved.  Following is the body section this is where most changes have been made. The best thing is that one won't need to nest several div tags to create a good website layout. HTML5 came along with better elements like the <header> and the <nav> element. On the left is an image which will be an output of how HTML use to be used while below is an image of what one would get as a result when using HTML5. Personally I think that the HTML5 makes work more organised and easier to understand. As when I use to code using HTML4 it use to be time consuming till I got the hang of which tag is which. At least know you have the <nav> which can be used for menus the header for banners and titles and the <footer> for footer and copyrights. 
Drawing with HTML5
One can create different things with the draw feature like animations, charts and graphs, simple diagrams and more.To draw with HTML5 you need to use a canvas.  One can use rectangles and arcs as well as paths and line drawing and quadratic curves also you can give shapes certain effects like; fillings and strokes, applying shadows, gradients and transparency. You can also rotate the image and scale it. To do these things you need what's called a canvas and to use a canvas you need two specific things,  the most important is the <canvas> tag, in which you will be placing drawings within them and also javascript to do the drawing. Below is an example of how one can create a smiley face.


1.<script type="text/javascript"
2.   window.onload = function() {
3. var drawingCanvas = 4.document.getElementById('myDrawing');
5.    if(drawingCanvas && drawingCanvas.getContext){
6.    var context = drawingCanvas.getContext('2d');

7.  context.strokeStyle = "#FFFFFF";
8.  context.fillStyle = "#800040";
9.  context.arc(100,100,50,0,Math.PI*2,true);
10. context.closePath();
11. context.stroke();
12. context.fill();
   

Above is part of the javascript which creates the smiley face this section create a big outline circle. The rest of the code to create the complete smiley face is pretty much similar. Then in the body section goes the canvas tag as following:

<body>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
<h1>This is a canvas test</h1>
</body>
</html>


Forms
In forms some new tags where added which some of them can be seen above like the speech tag and the telephone together with the date tags. The first after the name and surname tag is the  telephon. The type for telephone is tel. The date tag can have a minimum date and a maximum date and the user can select by clicking on the up and down arrows any date he wants. The best improvement for forms in my opinion is the speech recognition function. The x-webkit-speech can be used with text, numbers tel and search but cannot be used on textarea fields. Below is an example of a form I did using a few of the new elements.


1. <label>Telephone</label>
2.    <input class="mystyle" name="telephone" type="tel" 3.    size="20">
4.  
5.    <label>Date</label>
7.    <input type="date" min="1990-12-12" max="2011-12- 8.    12" value="2011-06-16"/>
9.    
10.    <label>Speak</label>
12.    <input type="text" x-webkit-speech />




CSS3
The major difference with CSS3 from CSS2 is the CSS3 introduced modules, modules allow specifications to be completed and approved faster as they are completed in chunks. Selectors are a new functionality in CSS3. Examples of new selectors:
  • Matching on attributes and attribute values, including partial matches
  • Structrual pseudo-classes like nth class
  • A target pseudo-class to style only elements that are targeted in the URL
Selectors are already known and supported by a lot of browsers therefore one can already start using them.
Another improvement can be seen in text effects and layouts where one can make changes to justification of text in documents and whitespace. Also CSS can handle more media like running headers and footers which will also include advanced properties for printing generated content like footnote and cross-reference properties. Designers can also make multiple use of columns by using column-gap, column-count and column-width.

CSS Borders 
Borders included a new feature being the border-radius property, this allows to make use of round corners easily without needed corner images or multiple div tags. To make a rounded corner there are two ways either. First one is using four individual properties border-bottom-left-radius, border-top left-radius, border-bottom-right-radius and border-top-left-radius, this will accept either one value or else two values. When two values are used the first value defines horizontally and the second vertically . Else you can use one command, border-radius. This is a screen shot of some of the corners that I tried doing.




#newStyle{
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background:#82C0FF;
margin-bottom: 10px;
}
#newStyle2{
height: 7em;
width: 15em;
-moz-border-radius: 2em 5em 2em 5em;
border-radius: 2em 5em 2em 5em;
background:#82C0FF;
margin-bottom: 10px;
}
#newStyle3{
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color:#990033;
margin-bottom: 10px;
}


Resizing a box
Another new feature is the box resize. This will allow users to re-size a box. To be able to do it you need to user the resize and overflow properties.


div id="size"
{
border:5px solid;
border-color:#990033;
padding:10px 40px; 
width:100px;
resize:both;
overflow:auto;
}

Both these image are the same box simply it was just resized. On one of the corners there is an icon you simply click and drag and the box will be resized.

 




Other new things in CSS3 are text effects, like shadowing and keyframes. Keyframes are animations example having a box which changes colours.  Shadowing is done using the text-shadow: 3px 1px 1px #990033; This will cause a text-shadowing effect which will have a pinkish colour. Another new feature is the word-wrap this allows long words to be broken and wrap onto the next line. This takes two values; normal or break-word
Keyframes in my opinion are very interesting. For this I created two boxes with CSS and then one box which will be moving. As HTML I used 2 divs. <div class="box1"> <p>This is box 1</p></div><div class="box2"><p>This is box 2</p></div>. Then created the CSS


1.  .box1{
2.  width:100px;
3.  height:100px;
4.  background-color:#004080;
5.  position:absolute;
6.  top:100px;
7.  left:50%;
8.  margin-left:-100px;
9.  }
10.
11  .box2{
12.  width:100px;
13.  height:100px;
14.  background-color:#800040;
15.  position:absolute;
16.  top:100px;
17.  left:90%;
18.  margin-left:-100px;
19.  }
20.  @-webkit-keyframes BoxMotion{
21.  0%{left:90%;}
22.  50%{left:10%;}
23.  100%{left:90%;}
24.  }
25. .box2{
26.  -webkit-animation:BoxMotion 10s infinite;
27.  }
From line 1-9 the first box is being created giving it the dimensions, selecting a colour and specifying the position. From line 11-19 is the other box being created having the same features and properties as the previous box. Line 20-24 is setting up the keyframes. BoxMotion is the name of the animation. From lines 25-27 is where the fun part is. This is making one box move. 10s is the speed you want to apply to the moving box, if for instance you set it to 5s it will go faster. Infinite is there so that the animation will keep going on and won't stop.


Two boxes pink box is moving to the right

Two boxes moving pink box went on purple box
JavaScript
Like HTML5 and CSS3, Javascript also added some new features some of them are Web storage, Web SQL storage, offline application cache, web workers and web sockets.
Web SQL storage
This is also known as DOM storage and offers improvement in cookies. This offers great storage capacity of 5MB. Data stored in a data stored does not expire and can span across several windows. There are two types of data storages session sessionStorage and local storage localStorage. Both are used for different purposes sessionStorage is used when you want data to be stored only for one particular session while localStorage is used to store data for more than one single session, when the browser is closed and is re-opened the sessions will remain there. Both of these implement the storage interface.
Methods and properties:
  • length - Gets the number of key/value pairs in the list
  • key (index) - Returns the key at the given index
  • getItem(key)- Returns the key associated with the given key
  • remomeItem(key) - Removes the item
  • clear()- removes all keys
Web SQL storage
This is used for accessing databases directly from javascript. One can now create a table, create a new record update and delete the record and also deleting tables. Below are some examples of how can this be done. Client-side database storage can be used.

Conclusion
With all these improvements and new features one can immediately notice a sign of relief as things have been simplified in the terms that now developers are more flexible with what can be done and achieved. Even thoughHTML5 is not fully released yet one can already notice the difference and once it is released there will be a big difference. CSS really made things easier. I remember doing the keyframes using flash and then loading up the flash animation into the website. With keyframes the size of the file will also help in having smaller sized website.


References: 

Posted by at No comments:

Thursday, 16 June 2011

Week 14 - More Second Life

Introduction
As we went further in with LSL, one can see that practically you can script anything, any prime in Second Life. This week we went into some more interesting worlds two of which were really amazing when you see how far Second Life can go.

Worlds
The first world was lost in bass, in this world as you enter you can tell your avatar to dance. There is a screen saying "touch to dance" and you avatar will start dancing. This was really an interesting place and also an interesting thing. In that world you don't need to worry that you don't know how to dance as everyone can dance! 
The other world we teleported into had really amazing light effects, like having a window and using a texture they made it look like sunraise are coming in. Also there was a really nice fireplace with fire. 
Objects
Last week I build an object that when you touch it, it sends a mail to specified address. This week I build a simple object where when it is touched you are directed to a specified site. To do so I had to use a new function called llLoadURL as shown in the below example.

 llLoadURL(llDetectedKey(0), "Let's Go!", "http://http://www.cynthiaduca.blogspot.com/");

This will prompt the user and offer him to visit the specified website. The specified URL must contain a protocol. Only two protocols can be used either HTTP:// or HTTPS:// other protocols like FTL and telnet won't work. This will only work if the object is not on mute if it is on mute the offer won't to visit the site won't be received. 

Offering the user to visit my blog.
default
{
    touch_start(integer total_number)
    {
        llLoadURL(llDetectedKey(0), "Let's Go!", "http://http://www.cynthiaduca.blogspot.com/");
   
   }
}

Notecards
Notecards can contain anything within them like text or else can have embedded objects like snapshots, textures and also other notecards. Any items in which you are going to embed in the notecard you need to edit their permissions and edit copy, modify and transfer. Notecards are found in the notecard folder. A notecard can have a default value of 65,536 bytes.

Functions of notecard
  • llGetNotecardLine - Pull out information from a notecard
  • llGetNumberOfNotecardLines - Returns number of lines in the notecard name 
  • llGiveInventory - Notecard contents are displayed and allows the user to keep or discard the notecard
Creating a new notecard
To create a new notecard right click on any folder in the inventory, preferably the notecard folder and select new notecard. Enter the text you want in the notecard and save it. To access the notecard you have to look for it in the inventory.  To put an image or a landmark on the notecard simply go to where the image or landmark are found in the inventory and drag it into the open notecard. Anything you want to put in the notecard simply is to drag it onto it. 
Creating a new notecard


Above are the screen shots of the steps taken to create the notecard and then the notecard was saved as schoolExercise.


Conclusion
From next week we will be discussing new topics which are more in use nowadays. We all agreed to start with some HTML5 and more javascript. After these few lessons on Second Life, I personally think that it was good learning some Linden Script because if second life can continue to evolve more one day we will be in need of LSL, but for now I don't think that second life made a huge impact. Although when you go in certain worlds one can immediately notice the amount of dedication needed by these people to put up together with certain ideas and work. In the future I think that LSL will be use and if improved further it will be of a success. Some improvements which I think are in need are that objects are too difficult, fussy and too much time consuming to build them and also requirements for internet speeds and connections really make a difference.

References:
Posted by at No comments:

Wednesday, 15 June 2011

Week 13 - More Linden Scripting Language

Introduction
Last week we started going into some Linden Scripting by doing some basic scripts this week we went in more detail and tried some more complex scripts.
First of I tried experimenting with a script that is found in the course material, where by clicking a prime your avatar can teleport.
To start with I started getting familiar with some different commands that are more complex and will be needed for this exercise.
Functions
Some of these functions where used to make the teleport successful. Vector DEST = <x,y,z>; was also used to select the coordinates to where  I wanted to teleport the avatar to. I tried changing a bit these coordinates to see where my avatar will end. I also came along another new function begin changed_link this occurs when duplicating a linked object or when a prime in an object chages its types of shape. The event doesn’t happen when the object is attached or detached.
Strings
I started going into a lot of different worlds where I saw that they had some sort of writings on them showing. Therefore I tried doing it and I managed. First I declared a variable of type string and also what colour I was going to use. Deceleration was done as following: string message = "This is Cynthia's Prim";
Once those where declared I used llSetText(message, color, alpha);. This was quite an easy job.  After this I passed to something more complex. You can display different text you can also display the description of the text by using  llSetText(llGetObjectDesc(),<1,0,1>,1);   or else displaying the object name using llSetText(llGetObjectName(),<1,1,0>,1);   llGetObjectDesc and llGetObjectName will automatically get this information from the general section in the build panel.
Another testing prime
E-mail
Next I built an object and made this object send e-mails. llEmail is a function used to send an e-mail you can attach the address, a subject and a message by first declaring them as: email (String time,string address,string subject,string message, integer num_left). This is triggered when a request by llGetNextEmail() is answered. Email’s time, sender’s address, subject, the message and number of emails queued are returned. Time is a Unix timestamp. The message can have a maximum of 1000 characters. 
Message format

You can also remove the  headers which are attached to the beginning of the message by making use of this line:

message = llDeleteSubString (message, 0, llSubStringindex(message,"\n\n")+1);


The object I created was a wall. I used different things things time instead of giving the object a colour I used textures and gave it a brick texture to make it seem like a real wall. Also I used the hallow which makes a kind of "whole" in the middle of the wall. Like this it makes it look like a wall with a window.

  
Next what I did was that when the avatar clicks on the object and touches it a mail will be sent. First I started with an easy example as shown below:

0. string email_address = "";
1.
2.  default
3.  {
4.     state_entry()
5.     {
6.         llSay(0, "Hello, Avatar!");
7.     }
8.
9.     touch_start(integer total_number)
10.    {
11.        llSay(0, "I sent an Email");
12.        llEmail( email_address, "Look it's an email 13.subject line!", "Testing 1 2 3" );
14.    }
15. }


Above is the default code where I simply added the email_address variable on top and added the llEmail function. Which the subject is "Look it's an email subject line" and the message is "Testing 1,2,3". Below is a more complex example.
1. string email_address = "myemail@xyz.com";
2.
3. default
4. {
5.     state_entry() {
6.
7.      
8.        llEmail( email_address, "Look it's an email 9.subject line!", "Testing 1 2 3" );
10.    }
11.
12.    touch_start( integer num_detected )
13.    {
14.         integer i = 0;
15.         do
16.            llEmail( email_address, "No touching!", 17. "My owner is: " + llDetectedName(i) + "\nKey: " +  18. (string) llDetectedKey(i) );
19.        while(++i < num_detected);
20.   }
21.  }


Above is the code. First you start off by declaring a variable as a string which contains the e-mail address to which the e-mail is going to be sent, for the object while testing I used my personal e-mail address. In the state_entry, anything under the state_entry will be done every time the script starts running once unless you reset the script. Then it goes down and finds the first function in which this case is the llEmail. When it reads the function it reads the sting. In the touch_state, an e-mail will be sent showing by whom the object was touched. In the e-mail there will be details. llDetectedName will show  by whom the object is created, while llDetectedKey gives you the key. Below are some screenshots of the received e-mail and also the message it contained. 
E-mail received
This shows that the e-mail has arrived and is found in my inbox, junk section. Although at first I taught that it wasn't working properly since no e-mails where arriving in my inbox but then I found all the e-mails in the junk section. 
Above is the e-mail message showing the details. The object name is defined by the creator who created the object inn the build section and can be anything.  The region is where the object is found at the moment when the prim was touched to send the e-mail while the local position is the coordinates of where the object is found. 

Conclusion
This week was another improvement towards Second Life, while working with prims and other building objects I continued touring around different worlds and continued getting more astonished as how many things can be done. Like waterfalls can be scripted and scripting the effect of a waterfall by setting a texture and rotating it will make it seem like water is flowing. Also at different worlds that there are. At first I can say that I really taught that SL wasn't that useful but getting to know it better I think it can be quite a success, being on your computer and chatting while sending gestures and doing as many things as possible can be quite a socializing event.


References:
http://lslwiki.net/lslwiki/wakka.php?wakka=llemail
Posted by at No comments:
Subscribe to: Posts (Atom)