This document provides an overview of front end UI development and techniques to make websites lighter, faster and easier to use. It discusses rich internet applications (RIAs) and the benefits they provide. It also covers tools like jQuery, techniques for page rendering and code optimization. Specific examples include a Firefox extension developed for Naukri.com, use of CSS sprites for image optimization, and efforts for the Arabic translation of content and SEO. The document concludes with information about the Naukri Facebook application.

2. Front End UI Development
Effective ways to make site
Lighter, Faster, Easier to Use

3. Table of Content
• UI Development Overview/Role
• RIA (Rich Internet Application)
• jQuery
• Page Rendering
• Firefox Extension as Desktop Job Search Tool
• Web Optimization
• Arabic Translation
• Facebook Application

4. 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

5. 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.

6. 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.

7. 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

8. Browser Share

9. 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)

10. JQuery
Why?
► 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

11. JQuery
Implementation
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/jquery1.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 );
}
});

12. jQuery Usage
BRV Response Manager

13. jQuery Usage
Rs 15 Lakh+ Home page

14. jQuery
Scale is based on the average worldwide traffic of jquery javascript in all years.

15. jQuery
Javascript Distribution

16. Page Rendering
Naukri Search Results page

17. ► 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%.

18. 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.

19. 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

20. HTML/CSS Optimization

21. 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

22. CSS Sprites
Before::
Single Images
….
►
►
►
HTTP Request : 55
Total Single Images used: 55
File Size: Approx: 20 kb
Combined to
One Image
After::
►
►
►
One Image
HTTP Request : 1, Saved (54)
Total Images Combined in the sprite: 55
File Size: 4.79 kb

23. Arabic Translation Study / Dev. Effort

24. Arabic Translation Study / Dev. Effort
Objective:
► To
translate the English language to the
equivalent Arabic language with the help of
CSS, Html tags.

25. 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

26. Arabic Translation Study / Dev. Effort
Difficulties we face while translating the content

27. Arabic Translation Study / Dev. Effort
HTML/SEO Efforts

<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

28. HTML/CSS Efforts
►
<html dir="rtl“>
►
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar"
xml:lang="ar“ >
for Right-to-Left Documents; Not CSS
CSS
► .rtl { direction: rtl }

29. Naukri Facebook Application

30. Naukri Facebook Application

31. Naukri Facebook Application

32. Feedback/ Suggestions