Showing posts with label Technology. Show all posts
Showing posts with label Technology. Show all posts

Monday, November 30, 2009

CSS Sprites

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. This can be used for creating multiple Menus with normal and hover background images or multiple logos ( i.e. clientele page logos).

Following figure is the set of icons with normal and hover state. Using this image in a background and adjusting its x and y positions on hover state will give you final result. That means, instead of having 6 different icons (3 for each normal state and 3 for hover) we can have one single image with its position adjusted thorugh css class. It helps to reduce number of http requests being sent to server.



CSS sprites compatible with each and every browsers if it is used with proper syntax and proper html stucture. No need to use css fixes. I have tested it on IE6, IE7, Mozilla firefox 2, 3, opera, Google chrome and Safari.

Saturday, August 15, 2009

Web2.0 Technology



Web2.0 Technology

Introduction
"Web 2.0" refers to the second generation of web development and web design that facilitates information sharing, interoperability, user-centered design and collaboration on the World Wide Web. The advent of Web 2.0 led to the development and evolution of web-based communities, hosted services, and web applications. Examples include social-networking sites, video-sharing sites, wikis, blogs, mashups and folksonomies.

The term is now closely associated with Tim O'Reilly because of the O'Reilly Media Web 2.0 conference in 2004. Although the term suggests a new version of the World Wide Web, it does not refer to an update to any technical specifications, but rather to cumulative changes in the ways software developers and end-users use the Web. Whether Web 2.0 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a "piece of jargon".

Web 2.0 websites typically include some of the following features/techniques.

Search:
The ease of finding information through keyword search.

Links:
Ad-hoc guides to other relevant information.

Authoring :
The ability to create constantly updating content over a platform that is shifted from being the creation of a few to being constantly updated, interlinked work. In wikis, the content is iterative in the sense that users undo and redo each other's work. In blogs, content is cumulative in that posts and comments of individuals are accumulated over time.

Tags:
Categorization of content by creating tags: simple, one-word user-determined descriptions to facilitate searching and avoid rigid, pre-made categories.

Extensions:
Powerful algorithms that leverage the Web as an application platform as well as a document server.

Signals:
The use of RSS technology to rapidly notify users of content changes.

How it works

The client-side/web browser technologies typically used in Web 2.0 development are Asynchronous JavaScript and XML (Ajax), Adobe Flash, and Javascript/Ajax frameworks such as YUI (Yahoo User Interface Library), Dojo, Mootools, and jQuery. Ajax programming uses JavaScript to upload and download new data from the web server without undergoing a full page reload.

The data fetched by an Ajax request is typically formatted in XML or JSON (Javascript Object Notation) format, two widely used structured data formats. Since both of these formats are natively understood by Javascript, a programmer can easily use them to transmit structured data in their web application. When this data is received via Ajax, the Javascript program then uses the Document Object Model (DOM) to dynamically update the web page based on the new data, allowing for a rapid and interactive user experience.

Adobe Flash is another technology often used in Web 2.0 applications. As a widely available plugin independent of W3C (World Web Consortium, the governing body of web standards and protocols), standards, Flash is capable of doing many things which are not currently possible in HTML, the language used to construct web pages. Of Flash's many capabilities, the most commonly used in Web 2.0 is its ability to play audio and video files. This fact alone has allowed for the creation of cutting edge Web 2.0 sites such as Youtube, where rich media is gracefully integrated with standard HTML.

In addition to Flash and Ajax, Javascript/Ajax frameworks have recently become a very popular means of creating Web 2.0 sites. At their core, these frameworks do not use technology any different from Javascript, Ajax, and the DOM. What frameworks do is smooth over inconsistencies between web browsers and extend the functionality available to developers. Many of them also come with customizable, prefabricated 'widgets' that accomplish such common tasks as picking a date from a calendar, displaying a data chart, making a tabbed panel, etc.On the server side, Web 2.0 uses many of the same technologies as Web 1.0. Languages such as PHP, Perl, Python, and ASP are used by developers to dynamically output data using information from files and databases. What has begun to change in Web 2.0 is the way this data is formatted. In the early days of the internet, there was little need for different websites to communicate with each other and share data. In the new 'participatory web', however, sharing data between sites has become an essential capability. To share its data with other sites, a web site must be able to generate output in machine-readable formats such as XML, RSS, and JSON. When a site's data is available in one of these formats, another website can use it to integrate a portion of that site's functionality into itself, linking the two together. When this design pattern is implemented, it ultimately leads to data that is both easier to find and more thoroughly categorized, a hallmark of the philosophy behind the Web 2.0 movement.