ui dev@naukri-2011

Effective ways to make site Lighter, Faster, Easier to Use

Front End UI Development

• UI Development Overview/Role

• RIA (Rich Internet Application)

• jQuery

• Page Rendering

• Firefox Extension as Desktop Job Search Tool

• Web Optimization

• Arabic Translation

• Facebook Application

Table of Content

Role of Front End UI Developer

►We do XHTML, CSS, Javascript and many more

► We tell the browsers what to do► We are responsible for “View Source”► We make the page stronger, efficient,

optimized and interactive

RIA (Rich Internet Applications)

Why?

► A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications.

► An RIA normally runs inside a Web browser and usually does not require software installation on the client side to work.

► Main benefits of the Rich Internet Applications are accessibility, performance, and consistency. RIA is completely about offering the user of the web an optimum experience over the internet and more than that it enables the companies to have a competitive edge in the market.

Moving towards to RIA (Rich Internet Applications)

Benefits of RIA ►Loads only required data►No change of page URL►Most of the things happen on client

side►Low server load by reducing the no. of

request and small request.

Online Tools we use to optimize code

► Jslint.org to check our JavaScript

► For Accessibility we use Total Validator

► To test our XHTML code we use

validator.w3.org

► To compress our css we use

csscompressor.com

Browser Share

JQuery

What?• Write less, Do more• Light-weight and Cross-browser

Compatible Javascript framework.• Free and Open source• Easily Embeds externally into html code.• Framework Size 70.5 KB (after

Compression 24kb)

JQueryWhy?►Faster than other frameworks►Easy DOM Manipulation, CSS

manipulation►Degradable Content►Supports almost all JavaScript Effects

and animations ►Tons of plugins►Set Attributes on Selectors

JQueryImplementation

Simple implementation with one .js file that needs to be included in the page

Sample Code

<script type="text/javascript" src="http://static.naukimg.com/hp15Lac/js/jquery-1.4.1.min.js"></script>

$(‘#foo’).show(‘slow’).attr(‘title’, ‘Show more title’);

$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });

jQuery Usage BRV Response Manager

jQuery Usage Rs 15 Lakh+ Home page

jQueryScale is based on the average worldwide traffic of jquery javascript in all years.

jQueryJavascript Distribution

Page RenderingNaukri Search Results page

► Search row/tuples were constructed in respect to the body of the page.

i.e On page rendering search tuples would appear first while all UI components gets rendered in the background.

► SRP page size reduced approx 50%. Hence the page loaded faster than older SRP page.

► Increase the speed by 35-40%.

FireFox Extension for Naukri.com

► This extension is designed for the jobseekers to search jobs, see their Recruiter Views

► This extension is written in XUL language using Naukri Search API

► It’s a very interactive way as the jobs are seen, searched

in a upfront manner.

Firefox Extension► Firefox extension helps in brand building,

promoting naukri services and drive traffic.► It behaves more as desktop application

then online.► Supported in Firefox 3.0 to 4.0► Search jobs in one click.► Set the preferences for job search. Next

time when user open Firefox the jobs are automatically searched.

► See the recruiter’s views after Login.► Safe & Secure

HTML/CSS Optimization

HTML/CSS Optimization

► Using Sprites for reducing no. of image requests.

► Loading content on request (Set URL on the fly)

► Removed unwanted code (Commented code, extra spaces)

► Using CSS inheritance - Making lesser CSS code

► Reducing the JavaScript code.► Home page is as per W3C guidelines.► After optimization new home page is 40%

faster than the older version

CSS Sprites

► HTTP Request : 1, Saved (54)► Total Images Combined in the sprite: 55► File Size: 4.79 kb

Combined to One Image

….

Before:: Single Images

After:: One Image

► HTTP Request : 55► Total Single Images used: 55► File Size: Approx: 20 kb

Arabic Translation Study / Dev. Effort

ترانسليتيراتيون أرابيكEnglish to Arabic Textستودي

Objective:

►To translate the English language to the equivalent Arabic language with the help of CSS, Html tags.

Arabic Translation Study / Dev. Effort

► Translation preserves meaning of a foreign language

► Transliteration preserves characters of a foreign alphabet

► Transcription preserves sounds of a foreign language

Concepts

Arabic Translation Study / Dev. Effort

Difficulties we face while translating the content

B: With Diatric MarkingsA: Without Diatric Markings

Arabic Translation Study / Dev. Effort

<link rel="canonical" href=" http://www.naukrigulf.com/ar/home" />

What is a canonical page? Why specify a canonical page?

A canonical page is the preferred version of a set of pages with highly similar content.

It's common for a site to have several pages listing the same set of products.

Reference: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=139394

HTML/SEO Efforts

Arabic Translation Study / Dev. Effort

► <html dir="rtl“> for Right-to-Left Documents; Not CSS

► <html xmlns="http://www.w3.org/1999/xhtml" lang="ar" xml:lang="ar“ >

CSS►.rtl { direction: rtl }

HTML/CSS Efforts

Naukri Facebook Application

Naukri Facebook Application

Naukri Facebook Application

Feedback/ Suggestions