Week 17: Mobile Phone Web development

Introduction

With the popularity of mobile phones sky rocketing this year, we have to think for an additional platform when developing a web site. This year there was a higher amount of mobile phones sold than laptops so we can see the popularity of mobile phone browsing especially with new internet technologies in mobile phones such as 3g & wifi.

Mobile Phone vs Smartphone

Do you remember when the only mobile phones we had could only send text messages and receive/make calls. Yes they still exist but are slowly becoming extinct with more smartphones being purchased everyday. Due to the powerful features they are coming out with, I bet that they will in the future eliminate the use of a computer as well. With the applications that can be installed on the phones, one can do almost anything imaginable like managing your business, print & share documents, play games, tune your guitar & a lot more. Some of the recent smart-phones also come with a 1- 1.2Ghz cpu which is really fast for such a device. The multi-touch screen also makes every command so much simpler.

Current Brands & Platforms

IOS - Apple
This is one of the most famous platforms in the world. The iphone's design gets a lot of attention which may be one of the biggest selling points but with the IOS it works as smooth as a Lamborghini.


Microsoft - Nokia, Samsung, Motorola, LG, HTC

Being more famous in the past but started fading recently, the companies still develop mobile phones based on a Microsoft Platform. This brings a choice to the people which would like to buy a Windows Mobile Phone

Android - Samsung, Sony Ericsson, Motorola, LG, HTC
The Number 1 competitor with Apple's IOS, Android is an open source platform so it can be used by different companies all over the world not just one. Currently andriod phones are more powerful than the Iphone at the same price or slightly higher and come in an equally nice design.

Browsers

It also happens that there's a browser war going on between mobile web browsers, here's a list of mobile web browsers that are currently used by mobile phones:

Safari on Iphone

 SkyFire for Symbian, Microsoft and IOS phones

 Android Chrome Browser for Android Based Phones

 Bolt Browser for Multiple platforms but popular in Blackberry & Motorola

 Internet Explorer for Windows based phones

 Firefox Browser for Andriod phones & Iphones

Opera Browser for Blackberry,Iphones & nokia phones.

GeoLocation
Geolocation is a new feature in HTML 5 which allows the developer to use inbuilt features through javascript to access & find the visitor's geo location obviously depending on the browser support. Beneath is a list of browsers that support this HTML 5 feature.


GeoLocation Support

• Internet Explorer 9.0+
• Firefox 3.5+
• Safari 5.0+
• Chrome 5.0+
• Opera 10.6+
• Iphone 3.0+
• Android 2.0+

We coded some geolocation code to see how it works & accessed it through our mobile phone to see if it supports it. What this script does is to first check wheter or not the client supports geoLocation & then get the latitude and longitude if it does work on the client. We also noticed that the browser asks for your permission before sharing your location. We also tried to access the file locally through Google Chrome browser but due to its security measures the permission was denied, instead on other browsers such as Mozilla firefox and Internet explorer let the file run freely. You can download the file by clicking here

Conclusion
As the same with all the HTML 5 features, this is quite a nifty feature that eliminate a lot of work for the programmer but the application shouldn't solely depend on it because of support issues obviously. A major disappointment in my opinion is that it asks the user for permission every time. I can understand that there may be some privacy issues but you cannot wait for a user's response when his location is critical for the application to work. There's another way you can do this by use some free API's out there to get the location via the visitor's IP address and here's a link to one of those services.

Week 16: HTML5, Javascript, CSS

Introduction

The new kids on the block are HTML 5 & CSS3 in web development which incorporates several new web features & was said to eliminate Flash elements from web pages. HTML5 is already available & even web browsers are already upgrading their technologies in order to support its features. Since not all the browsers currently support HTML5 a developer should only develop some of the elements in HTML5 or use HTML5 only for browsers which support HTML5 & use HTML4 for other browsers which don't support HTML5. The same statements apply also to CSS3.

HTML5 Features

<Figure> element - should contain an <img> tag & <figcaption> tag. the FigCaption tag should contain the caption of the image in text. The figure element allows the browser to combine the image with the caption

No more the need to use "type" with link & script tag - as the heading says, in html5 there is no more need to define the type of link or script.

ContentEditable - This nifty element property allows a visitor to edit content on the client side without the need of javascript. On an element that you need editable you should add this property: " contenteditable="true" ".

ContentEditable - This nifty element property allows a visitor to edit content on the client side without the need of javascript. On an element that you need editable you should add this property:

Email,Telephone,Search Inputs - Input field types that have been added include email, telephone & search inputs so that there is no need to validate with javascript & the form will expect the mentioned input type.

PlaceHolders - Inputs also have a placeholder property that will allow you to set a sort of default value & when the input is focused it is cleared. The reason for placeholders is to help the user with what he should input.

<Header> & <Footer> Elements - No more using divs with Id's to identify sections in the web page. These tags can be used to encapsulate all the content you want to put in.

Require Attribute -  Form elements can also have a required attribute to imply that the field is required by the in-putter.

AutoFocus - Form fields can now have this attribute so that they focus immediately as the page loads without the need for javascript.

Audio Support - There's no more the need for third party plugins in order to incorporate audio files in web pages, with the<audio> tag you can include audio files.

Video Support - As with Audio support, to insert video in your web page, you just need to use an <src> tag inside a <video> tag which allows your web page to show a video without the need of javascript or Flash.

Video Preload -  When defining preload on a video tag, the video is first loaded & then played eliminated the buffer. It just loads and plays.

Input Regex -  You can define a regex in a pattern property so that the form can validate the input by itself.

Canvas Element -  The canvas element allows the developer to setup a place where visitors can dynamically create or edit 2D & 3D graphics. 

Some web apps that use canvas & Html5 are:

• http://clublime.com/lab/html5/sphere/
• http://mugtug.com/sketchpad/
• http://www.themaninblue.com/experiment/Cubescape/new.php

CSS3 Features

• Border-radius - Allows the designer to create rounded corners on html elements using only Css.
• Border-Image - Accepts a link to an image which is used as background for the border.
• Box-shadow - Implements a shadow on an HTML element
• Multiple backgrounds - As the heading describes, Using CSS3 a web page can have multiple backgrounds not just one.
• Text-shadow - Implements a shadow on text.
• Attribute Selectors - Can be used to select elements with all types of attributes ex. div['type' = 'hello']
• :nth-child() and :nth-of-type() pseudo selectors - Can directly select a child by a number or a type by a number. The number is the sequence of occurrence of that particular tag.

Browser Support

	Safari 4(Win)	Firefox 3.5(Win)	Google Chrome(Win)	Opera 10 (Win)	Internet Explorer 6, 7 & 8
@font-face	Yes	Yes	No	Yes	Yes
HTML5 Audio	Yes	Yes	Yes	No	No
Hsla()	Yes	Yes	Yes	Yes	No
box-shadow	Yes	Yes	Yes	No	No
Css Animations	Yes	No	Yes	No	No
Css Reflections	Yes	No	Yes	No	No
Css Transitions	Yes	No	Yes	No	No
Canvas	Yes	Yes	Yes	Yes	No
HTML 5 Video	Yes	Yes	Yes	No	No
border-image	Yes	Yes	Yes	No	No
Multiple Backgrounds	Yes	No	Yes	No	No
Css Columns	Yes	Yes	Yes	No	No
Css 2D Transforms	Yes	Yes	Yes	No	No
GeoLocation API	No	Yes	No	No	No
Canvas Text	Yes	Yes	Yes	No	No
rgba()	Yes	Yes	Yes	Yes	No
border-radius	Yes	Yes	Yes	No	No
opacity	Yes	Yes	Yes	Yes	No
Css Gradients	Yes	No	Yes	No	No
Css 3D Transforms	Yes	No	Yes	No	No

Conclusion
After using it, I conclude that HTML5 & CSS3 facilitates the life of the web developer since it eliminates all the boring & repetitive stuff that has to be coded over & over again. That said, I wouldn't recommend to develop a Fully equipped HTML5 website because not all browsers support the features of HTML5 & CSS3 and this could lead to reduced market share for your website. 

Week 15: More Second Life

Introduction

This week will be the last lesson that we'll be covering this topic since we commonly decided that it's best to focus on other subjects during the last sessions for this semester. We are still to create the objects necessary for the second life coursework though. We also experimented a little bit more with scripting on objects while cruising from one place to another

Skype Connection

One of our classmates was in Costa Rica during this lesson so he decided to join the class using skype video conversation to follow parts of the class. I must say that it was quite a pleasant experience and although we experienced some 2 second lag it worked perfectly altogether. The only problem was that due to the laptop being connected to skype was on the teacher's desk so Kurt couldn't hear us clearly.

Topic Decision
As already mentioned in the introduction, we decided to cover some new topics in the upcoming lessons which are outlined in this list:

1. HTML5, Javascript, CSS

2. Mobile web development
3. Facebook development
4. Custom PHP libraries
5. Cloud Computing
6. Web Security

Conclusion

The upcoming sessions will be pretty interesting since we will cover some new technology & will help us learn them & hopefully impliment something useful with the knowledge. The topics that I'm most interested in are Mobile web development and Facebook development because I always wanted to find some time to cover up these topics but never found enough time to do so.

Week 14 : Second Life Scripting

Introduction

Scripting makes a big part of Second Life because object interactivity is largely customizable using the scripting language in Second Life (LSL). This scripting language is similar to javascript & is event driven.

Scripting

Being  a bit more experienced from the previous sessions, I knew what I had to do in order to create scripts on objects. So as soon as I logged In I started experimenting with different script on my objects. The first thing script I wrote was executed as soon as someone touches the object. Here's the code to do that:


default
{

    touch_start(integer total_number) {

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

    }

}


To script some code on an object, you have to right click on an object, press edit & content> new script. Than a window will appear in which you can right your favorite scripts. Here's a screen shot to illustrate just that.

Conclusion

It's pretty easy to script an object once you learn the events, internal functions and get used to the scripting language. I have already used event driven languages such as C# but i think that this language is more similar to Flash actionscript & in fact I think the two have really close similarities.This scripting language also consists of pretty good documentation which can be found online at http://wiki.secondlife.com/wiki/LSL_Portal. The conclude this post, I suggest that before trying to develop some scripts by yourself, first go into the portal & see some example scripts which you could easily understand unless they are comprised of complex graphics & 3d scripts.

Week 13 : Second Life Objects

Introduction

During the second session on Second life, we decided to go into second life during our class & meet up together to experiment with it. After adding ourselves as friends we wondered around for a bit to explore some places & decided to meet up in one place.

Creating Objects & Scripting

We made sure that we were logged in as advanced users & started creating some objects using the tools provided in the viewer. Creating an object is quite simple but it takes a little bit more knowledge to develop a script and bind it to an object.
Step 1: Right click > Build
Step 2: Draw the object in the viewer
Step 3: Name the object and set some custom properties

Afterwords you can attach a script to the object which is usually an action triggered by an event such as when someone sits on your object. I've noticed that permissions can be given to other second life members to edit the object as well, so an object can also be developed as part of a project made of multiple people. Finally once the object is ready you can wear it, use it or even sell it for linden dollars.

Scripts


//This script shows a url to the avatar that touches the particular objects

default
{

touch_start(integer total_number) {

// load a dialog with a URL
llLoadURL(llDetectedKey(0), "Tripchamp", "http://www.tripchamp.com");

}

}






//This script plays a sound every 30 seconds


default
{

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

llPlaySound(llGetInventoryName(INVENTORY_SOUND,0),1);

}

}






//This script plays a sound every 30 seconds


default
{
string email_address = "xx@example.com";
touch_start() {
llEmail( email_address, "Hello World Email!", "This is a test email");
}


}


Experience

As already mentioned, during our session we decided to meet up all together in second life with our avatars. It was a funny experience since we watched as some so called second life geeks threw some objects at us and called us noobs while we were trying to repell back without any success. We created objects near each other, interacted with each other aswell as with each other's created objects. We also noticed that the viewer has a music player integrated with it which plays quite some nice music. Finally we decided to meet up in Middlesex(On second life obviously) & took a picture which you can view underneath. 

Conclusion

Today was all about meeting each other, becoming friends on Second Life, Experiencing the World, creating objects & taking photos. One thing I'm starting to admire about this 3D world is it's vast flexibility in allowing users build it piece by piece. We can take an example with facebook which is the world's most profitable user driven website & we can say without it's users it's just a useless piece of software with no revenue. Comparing to such software, up till now Second life hasn't made similar success but may one day in the future.