HTML5 and CSS3

Introduction

Even if more and more websites are starting to implement features of HTML5 since most modern browsers have some HTML5 support, this new standard for HTML, XHTML, and the HTML DOM is still a work in progress. 

Apart from the obvious of having new features based on HTML, CSS and JavaScript, the main aim of HTML5 is to reduce the need for external plugins (such as Flash) and scripting, have better error handling and perhaps most importantly (at least in my view) is to be independent from any device.

New Features in HTML5

Since the web has changed so much since the previous version of HTML released in 1999 HTML 5 introduces a lot of new features, to make better use of web capabilities. Some of the most noted features include:

• Video and Audio Elements for media playback
• More and better support for local offline storage which is based on databases instead of cookies
• A canvas element for drawing used for rendering of graphics or other visual images
• New form controls to be used for error handling
• Content specific elements (such as: article, footer, header, nav and section) to give pages more meaning
• New form controls ( such as : calendar, date, time, email, url, search) to be used instead of standard textboxes when a specific format of input must be done.

Browser compatibility 

Unfortunately browsers still don’t have a standard which all follow, each and every one of them have different compatibility with HTML5. A good way to find out how much your browser supports HTML5 is to go the website called html5test.com with any browser. This will give your browser a score out of 450 and then give you a detailed explanation where your browser gained an lost points on HTML 5 standard and specifications.

I first tested this website using the latest version of Google Chrome (12.0.742.112), this scored a respectable 328 (plus 13 bonus points) out of a possible 450, being highly compatible in the areas of Parsing rules, the Canvas element, Video (with the exception of subtitles and MPEG-4 support), Audio, Elements, User interaction, Geolocation, WebGL, Communication, and Storage, while having completely no support of microdata, local multimedia and notifications. Google Chrome fared reasonably in the Forms, Security and Files sections.

As a comperision Internet Explorer 9 only scores a 141 (with 5 bonus points) out of 450. Even the default browser of an Android smart phone scored a slightly better 184.

CSS 3

CSS 3 is the latest standard for CSS, which was developed to go with HTML 5 and has a lot of new features to be used to style Web pages.

The first feature that I have come across is the additional functionalities of borders. With CSS3, you can create rounded borders, add shadows to boxes and use images as borders. Unfortunately not all browser support all these features, and most that do require a prefix in order for everything to work.

Here is an example of a rounded border:

*here the –webkit- prefix is used for Google Chrome and Safari

Another interesting feature is the text shadow effect which is very simple to use, the only parameters to give are the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow.

text-shadow: 5px 5px 5px #FF0000;

 

CSS 3 has also added the capability to use fonts which are not installed on the user’s machine, but use a source with a URL.

A complete new feature is the 2D Transformations with which one can move, scale, turn ,spin and stretch elements.

-webkit-transform: rotate(30deg);

-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

-webkit-transform: skew(30deg,20deg);

-webkit-transform: scale(2,4);

 

There are also the 3D transformations but these only work on Google Chrome and Safari using the –webkit- prefix

Another function is the Transition function which is used to add an effect when changing from one style to another without using Flash or JavaScripts.

This example would make a div element stretch whenever the user moved the mouse on it.

  

 

Finally there are also animations which can replace animated images, Flash animations, and JavaScripts in many web pages.

An example is to have the background color of an element change gradually, or the position change. This is done by writing what needs to happen at certain points of the animation, and how long would the animation take to fully complete.

For example an element starts off with a blue background color and you want it to animate to green midway through the animation and finally end up yellow. And you want the animation to last 10 seconds.

So in this case the CSS would be:

Conclusion

I found out that HTML 5 has amazing potential with all its features, unortunatly not all browsers are really compatible with it ubt progress is being made. I also think with all the features of HTML5 and CCS3, Flash and Javascript may die in the future.

Second Life (cont.) Building Objects and Scripting

Introduction

In this blog post we go into more detail in Second life and start building some objects in this virtual world. To start building in Second Life first you must go in a place in the world that allows the user to build. These places are called Sandboxes, it is only allowed to build in these Sandboxes and each Sandbox has its own rules such as you cannot build a wall around an avatar caging him being not able to get out without a teleport. Failure to abide these rules could result to a ban from Second life.

Building Objects

To Start building in the sandbox you right click the ground and select build from the menu shown this will make the building menu visible on the screen. Building is done by selecting shapes (prims) and placing them in the world. These shaped can be modified in shape, position and size as the user wants. Also multiple items can be linked together to form one object. This is done so that an Object will have more details to it and will look better.

The first object I created was a couple of boxes linked together to make a very bad looking chair that an avatar can sit on.  Every avatar can sit on your object if you are not currently editing it. I made sure that when an avatar will sit on my object, it will sit properly.

Also you can create objects and wear them on your avatar carrying them around where you go showing, while showing them to other people. For this I decided to create a simple War hammer for my Avatar to carry around. I used the cylinder type prim and a cuboid type prim and linking them together after positioning them carefully at the right place.


To wear the object, just right click it and select wear from the menu. I decided to put the object I created on the right hand of my avatar. When I selected this the hammer didn't slot in my avatar's right hand correctly so I adjusted its position as well as I could to make it look like my avatar is carrying the hammer in its hand while walking.

Scripting

Users in 2^nd life use Linden Scripting language to script objects and have them interact with the rest of the virtual world. To script an object, right click it and choose edit to open the edit window. In the edit window you may select "more>>>" to reveal five tabs marked general, object, features, content, and texture. Then choose "content".  This window shows the contents of an object which can hold scripts, notecards, and even other objects. Press "new script" to add a new script. 

When scripting an item you have to tell the object what to do and when will it do it. Simple examples of what an object can do with script include:

• Rez an object
• Give something to an avatar
• Say something in chat
• Change the object's color
• Change the object's texture
• Prompt an avatar to load a URL in a web browser
• Create hovering text
• Play a sound
• Move around

Amongst other situations these scripts could be performed in the following situations:

• As soon as the script starts
• When an avatar touches your object
• On a repeating timer
• When an avatar is nearby
• When someone says something

             

Here is an example of a script of an object changing its color to red whenever somebody touches the object the script:

default
{


touch_start(integer total_number) {


// change color!
llSetColor(<1.0,0,0>,ALL_SIDES);


}


}

This following example will have the object say "Hello"  in the chat on every 30 seconds.

default
{


state_entry() {
llSetTimerEvent(30);
}
timer() {


// speak out loud!
llSay(0,"Hello");


}


}

After experimenting with these simple examples on the Hammer I created,  I decided to create some more simple objects.

First I started with a very simple chair that would be used to sit on. I just used a cube to sit on and a thin cuboid to make the back of the chair, I combined both objects and made the avatar sit on it.

Finally as my last 2 scripts I decided to give a new script to my hammer to send emails and make it open an internet browser at a specific webpage. 

The script used for the emails is as follows:

default  
{  
  touch_start(integer total_number) 
  {   
    llEmail( "danielsammut92@gmail.com", "Test", "Test" );  
  }  


} 




And The script used to open a web browser to a webpage I desired is :




default  
{  
      touch_start(integer total_number) 
      {  
             llLoadURL(llDetectedKey(0), "view my blog",   "http://sammutdaniel.blogspot.com/");  
       }  
}

Both scripts are run whenever the object is touched.

Introduction to Second LIfe

Introduction

This week, we start out on something completely different from what we have done so far in this topic. After going through so many different Web technologies such as HTML, CSS, JavaScript and PHP we will now begin a few weeks working on Second Life.

Second Life is an online virtual world developed by Linden Lab launched in 2003, This is like a social networking website but instead of profiles people communicate with each other with the use of avatars. An avatar is a graphical representation of the user’s character. This is similar to many Multiplayer Online RPGs (Role-Playing Games) where a user has his own personalized avatar, meets with other people’s avatars on the network and then do stuff together.

What is different in Second Life then other Online Games and Networks is the ability to build stuff in the virtual world and then program it in any way you want. This could be anything from clothing to buildings to cars with each having its own individual use.

Installing and Logging In

To install the client program for Second life an account was created with Second life on the website creating a username and password with the username being used as the name of your avatar and a sample Avatar is chosen to start with which then could be fully customized to the users desires (except the username). After registering the client application is downloaded and installed.

After installing the application, one could log in by using the username and password chosen in the registration. Also you must chose to login in either Basic or Advanced Mode. The difference is that in Advance mode you could code using Linden Scripting Language and the menus are arraigned in a slightly different way. What I found to be quite puzzling is that before you log in if you change from Basic to Advance Mode or vice versa you have to close the application and restart it. Since at first I decided that I will just look a bit around to see how things work in Second Life I decided to run in Basic Mode.

What I found to be quite annoying in Second life is the massive loading time it took to load everyone’s Avatar and the terrain around you and I am using a laptop which I can run games which came out a month ago smoothly so I can only imagine in 2003 how much worse the loading times where at that time since the hardware wasn’t as good. When I saw this I decided to lower the graphics used as much as possible so that it will run smoothly but for some reason I could not find the edit menu item anywhere to change the graphics (see screenshot below) at least I found a shortcut to go to the preferences (ctrl + p) and I lowered the graphics. Although the application now was much smoother when walking around the loading times where still long to load everyone’s Avatar and the terrain when either logging in or teleporting to a new locations.

The World of Second Life

Apart from this when logging in the first time you will be taken to a place to learn the controls. I found that the hotkeys/shortcuts automatically set for the controls are much simpler to use then the actual controls detailed in this part by Second Life. For Example, the key that is used to fly (yes you can fly around in Second life) is told to be “Page Up” and to go back down to the ground is “Page Down”, while the hotkeys for this command is “e” and “c”. Also the same applies for moving, I much prefer the  WASD set up of the hotkeys then the arrow keys since the mouse is used a lot in this to click objects and interact with them.

Teleporting

Since I mentioned teleporting before, let me expand on that a bit.

In Second life you have a search where you can find your friends and add them to your friends list by sending them a request. Once this is done and the request is accepted you could have private chats with anyone in your friends list and also something which is helpful is that you could ask for a teleport to go near friends quickly instead of needing to chat and decide on a specific place to meet and then make sure it’s a place where your fiend will see your avatar.

Conclusion

To conclude this post, I decided to get a change of clothes so that I won’t look like a complete beginner. I right clicked my character and selected edit appearance and started messing around with the shape and clothes of my avatar. I changed his hair, his figure through the multiple menus and features and decided on a short and fat dwarf like shape with a big beard since all the general male avatar seemed tall and well built and I like to be different. Next week we’ll start building some objects and scripting

CourseWork 2 Web space management system

Introduction

This blog post will detail how the coursework of the webspace management system was created and explaining all of its features. The system will consist of 3 main pages: the login page, the mainpage and a registration screen.

Here is the explaination given to us on what we should do.

Coursework Task

Write a remote Web space management system suitable for handling Web site content of various types. It should allow a user to add and organise files to a personal Web area which is secured by password. Again, there will be a connected theme, to be announced in lecture time.

This program should include the following features.

1)  Your program should be written as PHP scripts . The user should be able to work with this program via a Web browser from any computer connected to the Internet.

    2)  When your program starts, it should ask the user to enter a password and username, and not allow the user to access their Web space unless they know the password. Passwords should be stored in an appropriate MySQL database.

   

    3)  Once allowed access the user should be able to:

    a)  Make and delete directories
    b)  Delete files 
    c)  Upload new files

    d)  Only be able to access their own space, which should have space limits imposed upon it.

User data and passwords should be stored in an appropriate MySQL database or file system which the PHP script can access; you must consider security implications. There are no restrictions on the style of the user interface, although you should consider ease of use and design to be issues too.

Login Page

I started off with building on the login screen created in last week’s PHP with MySQL blog post. The main improvement on the Login Screen was that an extra button was created called Register which will be used to redirect the user to the registration screen. I also gave the login screen a bit of a space theme although I am no designer this is the best I could come up with.

Apart from this new button the login form has still basically the same functionality as before using cookies for the “remember me” function  for automated logins and using sessions to remember the username when the user is redirected to the mainpage so that only his page is viewed.

Registration Screen

This page consists of three textfields in which the user will fill in the Username desired to register and the password for the user. The 3^rd textfield will be used as a confirm password as most registration form are. Again the Space theme was kept throughout for consistency.

  

When the user has filled in all the fields the user will press the register button which will first check if all the fields are filled in, then it will check if the password and confirm password match. If they do, an SQL connect is created with the localhost server and an SQL query is sent to the server to find out if the username chosen by the user already exists. This is done by selecting all the rows from the Users table where the Username is the username inserted by the user.  If the result of the query has a row it means that the username already exists.

  

If the Username doesn’t exist the username and password chosen are inserted in the table using the “mysql_query”. After the record is inserted the program will try to create a folder on the Server with the username as the folder name. This folder will be used as the folder loaded in the mainpage when this new user is created. If the folder is created a Session is created detailing that the registration is successful and the user is redirected to the login page.

  

The login page is checking for a session called Successful which is only created when a registration is successful, if its value is “Yes” an alert box is shown to let the user know that the Registration was successful. This was done in this way since if the alert box is created in the registration page, it is not shown due to the page is redirected to the login page, even if the alertbox is before the redirecting in the coding.

MainPage

When this page is loaded a check for a session named Username is done to write the Welcome + username. On the page, Also the session is used to open the folder using the “opendir” function in Php, the folder where the user will upload all his files since when this is created the name of the folder is the username chosen by the user. If the session is not found, the page is redirected back to the login.

This page consist of a file input with a button to start the event, a textbox with a button to add a folder with the name inserted in the textbox, a button to go back to the previous directory if you accessed a folder inside your personal space, a logout button to go back to the login screen, and a list of all the files and folders inside the space of the user name with a delete button near each one to be able to delete it. Here is a detailed explanation of each feature in the main page and how it was achieved using PHP.

The feature to load the files and folders of the user is achieved by using the “is_dir” feature to know if the item loaded is a folder or a file. If it’s a folder instead of just showing just showing the name of the file, the name of the folder would be a hyper link that would call a function to show all the files inside that particular folder by sending the name of the folder and adding it to the path used to get all the files from.

  

To know which files and folders to show when using the “opendir” function is that the directory which is opened, is the one created when the registration was done is used by going to the main folder of the webspace. Then adding the Username to the directory, since that is the one created.

Also when showing every file and folder name a delete hypertext field is created to be used to delete the file or folder.  This hyper link sends the name of the file or folder to a function which check if it is actually a file or a folder first using the "is_dir()" and then if its a file, it deletes it using the unlink feature. If its a folder it first has to go into every file and unlink it one-by-one before deleting the directory since PHP would give an error if it tried to delete a folder which had any kind of content.

As explained before another function in the Webspace is the ability to Upload Files. This is achieved by using the file input and HTML; the user will select a file from his computer and then click the upload file button. The PHP code will check if the file size is larger than 2MB the file is not loaded an error is given. Also an error is given if the size of all the items in the folder used by the user plus the size of the file to be uploaded exceeds 10MB. I chose the limit to 10MB so that I did not need to upload a lot of files before the limit is reached and testing could be done properly. When the file is uploaded the page is reloaded using the HEADER function so an alertbox shows the user that the folder is created and it is now shown since the page is reloaded the new folder is now shown as well.

  

To Find out how much space is used, a function was created that will add every files' size to a variable in the main directory of the user, and then before uploading the file adding it to the size of the file that is going to be uploaded now. This is done because It could be that the file that will be uploaded now will exceed the maximum limit.

Another feature is to add new folders in the webspace. A Textbox along with button to add folder exists to make this function properly. This feature is achieved when pressing the “Add folder” button and the PHP script will take the value of the textbox and using the “mkdir” function in PHP a folder is created. Again the program checks if the folder already exists and if it does the folder is not created. After the folder is created the program uses the header so that the user will go back to the current page, so that an alertbox shows the user that the folder is created and it is now shown since the page is reloaded the new folder is now shown as well.

If the User accesses a folder inside his webspace, every item uploaded or folder created will be now inside that particular folder. Also if the user wishes to access the main folder again, he does not need to log out and log back in. The "Back to Previous Directory" will take the user up one level in the directory using the "dirname" function in PHP which gives you the directory name of where an item currently is so by giving it the current path, the directory which it will give us is the folder we need to go back to the previous directory. A validation is created so that the previous will not go further than the main screen of the specific user.

Also a very simple logout button is used to unset and destroy the sessions used in when logging in and the page is redirected back to the login page. 

In the end this is what the main page looks like.

Conclusion

After finishing everything I made sure that the website is compatible in all browsers, since I kept the CSS to a minimum, everything was the same in every browser tried (Google chrome, Firefox 4, Internet Explorer).

Although I have spent a lot of time on this coursework I still believe that a lot of improvement on features could be done such as Downloading files that one has uploaded, creating a folder offline for the user which would sync with the webspace, or having an e-mail sent to the user whenever he registers first and a feature to send him an e-mail with the password whenever he forgets it.

Also I think that some improvements on styling could be done but since I never had any styling or designing experience I tried to keep things simple.

Some limitations I have done creating this Coursework was that every page had only 1 file that had all its PHP scripts. This proved to become quite messy when fixing errors or trying to find specific code. Next time I would make sure to structure the scripts into more files for at least every main function and link them to the main page using the "include" function.

As For my Experienced when using PHP over these last few weeks, coming from .NET Developer who never did any Web Development before was, that PHP although a very powerful scripting language still leaves us some things to be desired such as a good Debugging tool and maybe its strictness over Case-sensitivity can be a little tedious.