Thursday, December 23, 2010

Variations of css1, css2 and css3

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

CSS 1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996.[16] Among its capabilities are support for:
  • Font properties such as typeface and emphasis
  • Color of text, backgrounds, and other elements
  • Text attributes such as spacing between words, letters, and lines of text
  • Alignment of text, images, tables and other elements
  • Margin, border, padding, and positioning for most elements
  • Unique identification and generic classification of groups of attributes
The W3C no longer maintains the CSS1 Recommendation.[17]

CSS 2

CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2 Recommendation.[18]
CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on June 15, 2005 it was reverted to a working draft for further review.[19] It was returned to Candidate Recommendation status on 19 July 2007.

CSS 3

CSS level 3 has been under development since December 15, 2005.[20][21] The W3C maintains a CSS3 progress report. CSS3 is modularized and consists of several separate recommendations. The W3C CSS3 Roadmap provides a summary and introduction.[22]

Web 1.0, 2.0 and 3.0

Web 1.0

Web 1.0 (1991-2003) is a retronym that refers to the state of the World Wide Web, and any[dubious – discuss] website design style used before the advent of the Web 2.0 phenomenon. Web 1.0 began with the release of the WWW to the public in 1993,and is the general term that has been created[original research?] to describe the Web before the "bursting of the Dot-com bubble" in 2001.

Since 2004, Web 2.0 has been the term used to describe the current web design, business models and branding methods of sites on the World Wide Web.

The shift from Web 1.0 to Web 2.0 can be seen as a result of technological refinements, which included such adaptations as "broadband, improved browsers, and AJAX, to the rise of Flash application platforms and the mass development of widgetization, such as Flickr and YouTube badges".

Web 1.0 was dial-up, 50K average bandwidth, Web 2.0 is an average 1 megabit of bandwidth and Web 3.0 will be 10 megabits of bandwidth all the time, which will be the full video Web, and that will feel like Web 3.0.

 Web 2.0

The term "Web 2.0" was coined in 1999 by Darcy DiNucci, a consultant on electronic information design (information architecture). In her article, "Fragmented Future", DiNucci writes:

Examples of Web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies.

Web 2.0 websites allow users to do more than just retrieve information. By increasing what was already possible in "Web 1.0", they provide the user with more user-interface, software and storage facilities, all through their browser. This has been called "Network as platform" computing.[3] Users can provide the data that is on a Web 2.0 site and exercise some control over that data.[3][17] These sites may have an "Architecture of participation" that encourages users to add value to the application as they use it.

Technologies

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

  Web 3.0

Definitions of Web 3.0 vary greatly. Amit Agrawal states that Web 3.0 is, among other things, about the Semantic Web and personalization. Focusing on the computer elements, Conrad Wolfram has argued that Web 3.0 is where "the computer is generating new information", rather than humans

Futurist John Smart, lead author of the Metaverse Roadmap echoes Sharma's perspective, defining Web 3.0 as the first-generation Metaverse (convergence of the virtual and physical world), a web development layer that includes TV-quality open video, 3D simulations, augmented reality, human-constructed semantic standards, and pervasive broadband, wireless, and sensors. Web 3.0's early geosocial (Foursquare, etc.) and augmented reality (Layar, etc.) webs are an extension of Web 2.0's participatory technologies and social networks (Facebook, etc.) into 3D space. Of all its metaverse-like developments, Smart suggests Web 3.0's most defining characteristic will be the mass diffusion of NTSC-or-better quality open video to TVs, laptops, tablets, and mobile devices, a time when "the internet swallows the television." Smart considers Web 4.0 to be the Semantic Web and in particular, the rise of statistical, machine-constructed semantic tags and algorithms, driven by broad collective use of conversational interfaces, perhaps circa 2020.  David Siegel's perspective in Pull: The Power of the Semantic Web, 2009, is consonant with this, proposing that the growth of human-constructed semantic standards and data will be a slow, industry-specific incremental process for years to come, perhaps unlikely to tip into broad social utility until after 2020.

Thursday, December 16, 2010

HTML Inforamtion

The HyperText Markup Language (HTML) is the publishing language of the World Wide Web. The first version of HTML was described by Tim Berners-Lee in late 1991. The current W3C Recommendation for HTML is HTML 4.01, published in December 1999. There is however intensive work to define its next version, HTML5


Version Published year
HTML+ 1993
HTML2.0 1995
HTML3.2 1997
HTML4.01 1999

In HTML 4.0 all formatting can be removed from the HTML document, and stored in a style sheet. Because HTML 4.0 separates the layout from the document structure, we have what we
always needed: Total control of layout, without messing up the document content.

HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE
presentational or deprecated elements (like font). Framesets are not allowed

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML
2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:
    * New features should be based on HTML, CSS, DOM, and JavaScript
    * Reduce the need for external plugins (like Flash)
    * Better error handling
    * More markup to replace scripting
    * HTML5 should be device independent
    * The development process should be visible to the public

Metadata is information about data.
URL - Uniform Resource Locator
URLs can only be sent over the Internet using the ASCII character-set.
Since URLs often contains characters outside the ASCII set, the URL has to be

converted into a valid ASCII format.
URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal
digits corresponding to the character values in the ISO-8859-1 character-set.
ASCII stands for the "American Standard Code for Information Interchange".  It was designed in the early 60's, as a standard character-set for computers and hardware devices like teleprinters and tapedrives.

ASCII is a 7-bit character set containing 128 characters.
It contains the numbers from 0-9, the uppercase and lowercase English letters from A to Z, and some special characters.
The character-sets used in modern computers, HTML, and Internet are all based on ASCII.
The following table lists the 128 ASCII characters and their equivalent HTML entity codes.
ISO-8859-1 is the default character set in most browsers.
The first 128 characters of ISO-8859-1 is the original ASCII character-set (the
numbers from 0-9, the uppercase and lowercase English alphabet, and some special
characters).
The higher part of ISO-8859-1 (codes from 160-255) contains the characters used in
Western European countries and some commonly used special characters.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML tags are not case sensitive:
means the same as . Many web sites use uppercase HTML tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends
lowercase in HTML 4, and demands lowercase tags in future versions of (X)HTML.

HTML colors are defined using a hexadecimal notation (HEX) for the combination of
Red, Green, and Blue color values (RGB).The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
The combination of Red, Green, and Blue values from 0 to 255, gives more than 16
million different colors (256 x 256 x 256).
The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Web Formats

Vector Graphic File Types:
Adobe Illustrator saves its files in the Ai format and Corel uses CDR(CorelDRAW) or CMX(Corel Presentation Exchange or Connected Media Experience ) However there are file formats which are 'common' file formats that are cross platform. (Can be opened by many different programs).
EPS and PS:
The oldest and still most widely used method of saving Vector Graphics files for use in a range of other Graphics applications is by saving the file as an EPS or PS. These file formats were created by Adobe and used for saving a file that could be printed on a Post Script Printer. Corel Draw, Inkscape and Illustrator all give this option. EPS (Encapsulated Post Script) is a format where Text, Vector Graphics and Bitmap Images are saved exactly as laid on the program where they were created. Over the years the different programs have got much better at creating these files, in the past there were often irregularities when opening a file in a program other than the one that it was created in. For instance, the text the author used may not be installed on your computer or the Outline thickness may be wrong. Today however saving EPS files between the three major Graphics programs is no longer a problem.
PDF:
PDF (portable document file) was also created by Adobe and is a logical expansion of the PS and EPS format. PDF files can be viewed by anyone with a PDF viewer and have a range of quality options. PDF files can also embed fonts so you don't have to have them installed on the end users computer. PDF files can use file compression and low resolution images to make files for the Web or they can create large high quality files with no compression for Publication. Programs like Scribus, Inkscape and all the Adobe Products can open PDF files and allow you to incorporate or edit them. PDF is the format used to send your final Artwork to a Publisher for Printing.
The high PDF – X3 format is the established industry standard and supported by Adobe In-Design, Scribus and Corel Draw. PDF files are also a popular standard for E-Books, which are books to be viewed and transmitted over the World Wide Web. Pdf files can be viewed on the web by downloading the Adobe Acrobat viewer.
SVG:
SVG (Scalable Vector Graphics). This is a more recent file format used for saving Vector Graphic files. Inkscape saves it's files in this format. SVG files can be viewed on the web and are supported by modern browsers this allows very sharp high quality Vector Graphic Images to be displayed on the Web.
WMF:
WMF (Windows Metal Files) This format has been around for ages and it is a favorite way for saving Clip art that can be scaled to any size. Not all the more complex features of a Graphic image created in one of the programs like Inkscape are saved accurately, but for more simple line based flat color images, the format works very well.
Bitmaps and Raster Images:
Vector Graphics are different to Bitmap (Raster) Images which are the other major way of presenting Images on Computers and in Artwork.Learn Abour Digital Images, Bitmaps, Pixels, Dpi, Ppi, Resolution, Digital Photography, CMYK and RGB

Illustration Resolution Information

What resolution should I use for what purpose?
72 dpi is the default resolution of images used on the World Wide Web, but you will need to reduce the number of pixels using a Photo Editing program, for instance the 4 Megapixel image we used as an example earlier was 80 centimeters wide! At 72 dpi an image of 800 x 600 (28cm wide) will just about fill your entire computer screen but is only half a Megapixel in size. Most Images on the web are much smaller than this 200 pixels wide is common for instance, but it entirely depends on the design of the Web page.
150 dpi is a good resolution for images used in documents for printing to your local printer. For instance internal documents used in either business or schools where the documents are printed on a Laser or Inkjet printer and need to print in quantity and at a good speed.
300 dpi is the default resolution used for Offset printing or high quality photographic prints for framing. Take for example our 4 Megapixel image, if we convert its resolution to 300 dpi the images size becomes 19cm x 14cm , it has the exact same amount of pixels but each pixel is now much smaller (300 of them in a square inch).

What is a PIXEL?
The most important information to learn first is the basics of how a Digital Camera converts an image to computer code that can be viewed and printed on a computer. Firstly the image travels through the lens of your camera to a sensor called a CMOS sensor. The CMOS sensor breaks the image up into a series of squares called 'Pixels'. Each pixel has its own code that has information on its position and its color.

What is dpi, ppi ?
The image has two distinct ways of determining its size. Firstly the 'size' of each pixel is measured by how many pixels fit in an inch. Digital cameras generally shoot images at 72 ppi (72 pixels per inch) This is called the images 'resolution'. This term is also referred to as dpi (a printers term meaning dots per inch). Secondly the Image has a physical size which is measured by the number of pixels for instance 2272w x 1704h. At a resolution of 72 dpi this image is 31.5inches by 23.6 inches, or 80cm by 60 cm.

What is a Megapixel?
A Megapixel is 1million pixels, so if we take our image of 2272 x 1704 we get 3,871,488 pixels which is nearly 4 Megapixels.
What is file compression? JPEG vs RAW
Most Digital cameras by default save the image as a JPEG file which uses a mathematical algorithm to reduce the physical size of the code inside the image file. Let me explain a little more. If you take a shot on your Digital camera with the setting set at 'RAW' your camera will create a much larger file than the normal jpeg file. Basically the computer code for each individual pixel is stored in the file. This means the image file is of very high quality and all the information is preserved. JPEG files on the other hand are much smaller, but use a formula that groups pixels together and radically reduces the amount of information in the file. In doing this the image is being compromised in its quality. This is not a problem if you intend to reduce the file in size, view the file on a screen or use the file on the Web. But if you intend to use the image for high quality printing, either in a book, brochure or a framed print then I recommend that you shoot the image with your camera set on 'RAW'.


What is RGB Color?
Nearly all digital cameras save the image they shoot as an RGB file. RGB stands for Red Green and Blue. These are the three colors used by computer screens, televisions and projectors. They project these three colors onto the screen to create a very wide spectrum of colors and shades. Because screens use projected light they have a high degree of luminosity and brilliance which enables you to see many colors and shades that cannot be reproduced as easily when printed on paper. The reason for this is that light reflecting from a printed surface (even a glossy one) has no where near the same luminosity as projected light. That is why many people are disappointed when they can't seem to print what they are seeing on the screen.

What is CMYK Color?
CMYK stands for Cyan (light blue) Magenta (pinky red) Yellow and the K stands for Black. These colors are used by standard Offset printers to print nearly all the books and brochures, flyers etc. Laser printers and basic Ink jet printers also use these colors, but today are using increasingly more colors to try and reproduce images more faithfully. Artists sending work to a printer to be published should convert their images to CMYK. Not all photo editing programs support CMYK, naturally programs like Photo shop, and Corel Photo Paint do. There is also an excellent Plug in available for The GIMP which allows you to convert files to CMYK and also adjust the color in CMYK. It is much easier to adjust colors in an image using CMYK rather than RGB.

Wednesday, December 8, 2010

Gif, Jpg and Png Information

GIF is great for computer generated images with limited palettes
JPG is far better for photographs. It gives better quality images for the same file size
The GIF file is 2.4 times bigger than the JPG, but is clearly of lower quality
Note the use of pixel dithering to try to match the color gradations in the shirt
the file size of the JPG on the left is 18 times smaller than that of the GIF on the right.
Use GIF when there are large areas of uniform color and the total number of colors is smaller than 256
The JPG image above is seriously degraded
As all recent browsers now support the PNG format, it is time to abandon GIF for most purposes.
PNG is not limited to 256 colors as is GIF. The only reason to use GIF is for images with transparency. PNG has superior transparency, but unfortunately Microsoft refuses to fix a bug in Internet Explorer's treatment of PNG transparency. So to reach the widest audience, use PNG only for images without transparency.
GIF does significantly better on images with only a few distinct colors, such as line drawings and simple cartoons.
JPEG has a hard time with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels, for example. Sharp edges tend to come out blurred unless you use a very high quality setting. Edges this sharp are rare in scanned photographs, but are fairly common in GIF files: borders, overlaid text, etc. The blurriness is particularly objectionable with text that's only a few pixels high. If you have a GIF with a lot of small-size overlaid text, don't JPEG it.

Monday, November 15, 2010

Model Window

 jq code for Model Window


$(document).ready(function()
{$("#modal_window").hide();
$(".sign_in").hover(function(){
$(".sign_in").css('background', '#ccc');
$("#modal_window").show();
return false;
});

$("body").hover(function(){
$(".sign_in").css('background', 'none');
$("#modal_window").hide();
return false;
});
});

Monday, November 1, 2010

What you need in INTERVIEW

UI Designer

Ability to cope with fast changing technologies used in graphical design
Good understanding of cross browser testing (including IE, Mozilla and Safari)
Knowledge of ergonomics regarding man/machine interfacing UCD, HCI.
Knowledge of design and graphical tools
Knowledge of web technologies and standards (e.g. HTML, XHTML, XML, XSLT, CSS, JQUERY, JavaScript, Ajax, Flash, Photoshop, Dreamweaver )
Must have experience in web application development across different technologies - .Net, SharePoint and Java. Must have experience on version Control system like VSS


1) Application UI
2) Presentation in PPT, Flash & 3D
3) Video Editing


Adobe Photoshop 6.0

* Concepts of Graphics Designing
* Adobe Photoshop Tools
* Shortcuts to Tools
* Effects
* Filters
* Adobe Image Ready 2.0
* Animation
* Rollovers
* Scaling
* Color Modes
* File Format Conversion



Adobe Photoshop CS3 Test


* Workspace
* Working with Images, Retouching and Transforming
* Color Management
* Color and Tonal Adjustments
* Using Selection and Drawing
* Layers
* Filters and Saving Images
* Type
* Working With Web, Video and Animation
* Automating Tasks and Keyboard Shortcuts


HTML 4.01 Test

* Links and Images
* Tags
* Forms and Frames
* Advanced Tags
* Tables
* Fundamentals


XHTML 1.0 Test

* Fundamentals of XHTML
* XHTML Tags
* Using Images in XHTML
* Using Tables in XHTML
* Links in XHTML
* Forms in XHTML


DHTML Test

* CSS
* CSS Filters
* DHTML Tricks
* DHTML DOM
* Javascript
* JavaScript Syntax
* Javascript Events


Adobe Illustrator CS3 Test

* Illustrator Interface
* Working with Artwork and Drawing
* Working with Color and Special Effects
* Painting
* Working with Objects and Layers
* Reshaping Objects
* Importing and Exporting Files
* Type
* Web Graphics
* Automating Tasks and Keyboard Shortcuts


Adobe After Effects 7.0

* Compositions
* Masking and Transparency
* Animating Layers
* Video and Audio Effects
* Managing Layer
* Managing Layers
* Rendering

CSS 2.0

* Fundamentals of CSS
* Basic Styles
* Text and Font Styles
* Selectors
* Advanced Techniques