IPhone optimized web application development

July 23, 2008

I got a chance to work on a demo for an IPhone only web app and hence while working on it came to know how we can make optimal use of the screen and develop accordingly. Many a website use IPhone optimized pages and you can find them as iphone.websitename.com like flickr, bank of america etc. We can either play with our CSS to customize our present website to work optimally with IPhone or build a new page which is IPhone optimized.

With IPhone optimization I simply mean that we should be presenting only important informaiton and that too intelligently since we have a small screen with us to work on. IPhone comes with Safari browser hence you can get the same experience opening any website as you do on your pc\laptop. It is just that it is not build specifically for IPhone you normal see full page in the small screen which make you to use the multi touch zoom to expand the page and view the area which you are interested in. This generated the need of building pages which fit in this screen size.

Iphone can be used in both “portrait” and “landscape” mode where the screen dimension becomes 320X480 px and 480X320 px accordingly. We should take care of this orientation change too in our development.

Important points while developing a web app for IPhone:

1) Try running your application on full screen mode this give you more flexibility in terms of space. You need to call a small javascript function from body onload

 

 

function initFlow() {

window.scrollTo(0, 1);

}

call this from <body onload=”initFlow()”> in order to get you page opened in full screen mode.

2) Using IPhone specific stylesheet. There are several media types which can be used with CSS, including print, handheld, and screen. iPhone ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone.

To specify a style sheet that is just for iPhone without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iPhone style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone, use an expression similar to the following:

<link media=”only screen and (max-device-width: 480px)” href=”small-device.css” type= “text/css” rel=”stylesheet”>

 

3) Use Safari specifc (Web Kit) style keywords to take the best use of rendering and effects. You can find all the styles supported by safari at http://developer.apple.com/internet/safari/safari_css.html and http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1

4) In case you have different content like you have in FAQ and help page then using fieldset or targeting the div id with # and then using relative and absolute position can make the bottom div not coming on main screen and once clicked will come on focus. You need to push the above content with padding in -110px etc to move it this much on the left side such that it is again not visible on the screen.

5) Use big buttons as people need to use fingers rather than mouse to click.

6) IPhone opens the number keypad if you use “zipcode” in the name field of a input text box rather than default text keypad.

7) Use the OnOrientatioChange event to catch the orientation change of IPhone and use the CSS accordingly.

Rest of the development can be done either wth HTML\JS\ASP.NET etc as you do regularly. You can use IUI library to use pre written javascript for page titles, page size setup etc.

Hope this helps in case you are planning to develop a web app targetting IPhone.

bye for now.

visit my team at http://india.rampgroup.com


Add Flickr Photos on my Website or Blog

July 17, 2008

I was looking for adding my flickr photos to my website and hence searched flickr. If you want to add a filmstrip or badge to your website you need to have a Flickr account, some photos added to it and then visit http://www.flickr.com/badge.gne to complete a 4 step process of generating strip. It is customizable by default to vertical or horizontal and comes with html or flash type strip.

Once you get the code to be added to you website then add it under any container and if its not as per what you are looking for you can change the style which come with the code and make it as per your choice.

Flickr by default gives you strip but sometime you might be looking for a slideshow or preview mode of your photos on your website or blog. I found pictobrowser (http://pictobrowser.com/) to be doing it really good as well as found a really nice Beta studio called VuVox ( http://www.vuvox.com/) where again you can create customize your picture galery, if you are looking for it too. I am presenting a sample of how a slideshow code generated from pictobrowser looks like:

Flickr photos using pictobrowser

Flickr photos using pictobrowser

If you want to get a slideshow for youself click on pictorbrowser link in the image above and then you can follow a 3 step process to get your flickr photos on your website or blog. As of now it doesnt work with picasaweb. Vuvox works both with picasaweb and flickr.

Hope this helps in case you are looking for something similar.

bye for now.

keep an eye.
visit my team @ http://india.rampgroup.com/


Ramp Dev Xplode aka RDX – Ramp’s Annual R&D event

July 13, 2008

Ramp India has started a new culture in itself to promote, recongnize and award out of box thinker by starting annual R&D event. We kicked off the first event Today and its going to be mind racing\grilling 24 hours to come up with a prototype, patentable idea, software :), technical article, solution to business problem, process improvement proposals etc.

I found great response from fellow Rampers towards the event and as many as 11 teams registered for the event and all 23 participants seem to be fighting for the Title. Its around 1 AM and still these freeks dont want to take rest. It gives me a pleasure to sense the success of our first step.

People are working on Google Maps annotation with social networking and local services incorporation, Single page Book Mangement System using CMS and presented with Silverlight, Image Folder compression, Toolkit to enable drag-n-drop for Ajax Server Control and making a peronalized home page, Enabling Search from within VS for mouse down and up actions, Categorized Search Engine prototype, Localized intranet chat, Intranet machine monitoring system, Complex RegEx builder and checker etc

I am looking forward to see all of these getting as much completed as possible in this one day and then attend the presentation by all team. I am excited to be part of RDX… lets see who wins!! fingers crossed.

keep an eye…

bye for now.

visit my team at http://global.rampgroup.com


Ramp India’s 2nd Anniversary – 4th July 2008

July 8, 2008

On 4th of July we completed 2 years as a company and celebrated the auspicious day in style. We went to Araku valley and spend a joyous weekend there. Its a small but strong team which is aiming high and have right skills and focus to achieve it.

I have been the part of this journey from past one year where I have seen a lot of exciting and challenging work and a great set of talent to work with. Let me take this opportunity to describe the last one year for me and from me.

I joined Ramp in Sep ’07 and it has been an amazing journey since then. I found a young, vibrant, fun loving, energetic and inspiring team to be associated with. I came here from Microsoft IDC where I worked for 2 and half years, with aspiration of growing fast, facing new challenges, working in a startup environment and becoming one of it’s pillars in development.

Among all, the best thing which I cherish a lot in Ramp is the amount of freedom an individual has got to present his\her idea, talent and opinion along with the respect which is given to every opinion. It’s all ‘WE’ here because of the believe that we are the ‘Company’ and it’s not a separate entity. This keeps all other factors, which you look for in a company to work at, on the positive side. We always try to set a bar for us in every aspect of work we do because we feel that ‘Scope of improvement is ever’.

I see some really exciting work going on in the direction of Sharepoint Services, LINQ, Silverlight apart from different domain specific ASP.NET\C# development.

I see the coming year to be even more growth yielding and taking us to the next level. I am excited and looking forward for another good innings…

bye for now.

visit my team at http://global.rampgroup.com


Who am I what am I doing?

Who am I what am I doing?