Upload
pankaj-maheshwari
View
343
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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