Santosh kori Avtaaar

Hi Friends this my photograps…

2003

One month back

Two Month back

santosh kori

Best Webdevelopment toolbar/ firefox extension tools for web developers

Web Design and Development Extensions for Firefox

URL : MeasureIt.
Description : MeasureIt draws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

URL : Firebug.
Description : Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

URL : View Source Chart.
Description : View Source Chart Extension draws a color-coded chart of a webpages source code and displays source in its altered state after the DOM has been manipulated by JavaScript

URL : Web Developer.
Description : The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
Features : Clear Session Cookies ; Display Element Information ; Display Image File Sizes ; Display Ruler ; Display Topographic Information ; Edit CSS ; Show Comments…

URL : NoScript.
Description : NoScript Firefox extension provides extra protection for Firefox, Flock, Seamonkey and other mozilla-based browsers: this free, open source add-on allows JavaScript, Java, Flash and other plugins to be executed only by trusted web sites of your choice.

URL : Greasemonkey.
Description : This extension allows you to customize the way a webpage displays using small bits of JavaScript.
Hundreds of scripts, for a wide variety of popular sites, are already available at userscripts.org.You can write your own scripts, as well.

URL : FoxyProxy.
Description : FoxyProxy is a free, open-source advanced proxy management tool that completely replaces Firefoxs limited proxying capabilities. FoxyProxy automatically switches an internet connection across one or more proxy servers based on URL patterns. Put simply, FoxyProxy automates the manual process of editing Firefoxs Connection Settings dialog.

URL : DOM Inspector.
Description : DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

URL : sqlite-manager.
Description : Manage all your sqlite databases using this lightweight extension for firefox, this extension will be useful to developers who want to create and play with sqlite databases.

URL : QuickJava.
Description : QuickJava is a Firefox plugin that allows you to easily enable/disable the Java and Javascript from the toolbar. Two icons are placed in the toolbar, click on them to toggle the state. If you right click either icon it will update both icons.

URL : FirePHP.
Description : FirePHP enables you to log to your Firebug Console using a simple PHP method call, alll data is sent via response headers and will not interfere with the content on your page.
FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.

URL : CSSViewer.
Description : A simple CSS property viewer.

URL : EditCSS.
Description : The Editcss project is an easy way for web developpers to edit and modify currently loaded stylesheets.

URL : Browser Window Resizer.
Description : The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you are working on looks right in all of the standard resolution sizes.
Window resizer supports the 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 resolution sizes.

URL : Table2Clipboard.
Description : This extension adds two menu items, one in Edit menu and the other one on context menu. The item on Edit menu is always visible but grayed if no table cells are selected. The item on context menu is visible only when table cells are selected. To select table cells you must hold down Control key and click on cells to copy.

URL : YSlow for Firebug.
Description : YSlow analyzes web pages and tells you why they are slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.

URL : Extended Statusbar.
Description : A Statusbar with speed, percentage, time and loaded size.

URL : Dummy Lipsum.
Description : This extension generates “Lorem Ipsum” dummy text.

Validation and Aceesibilty Extensions for Firefox

URL : CSS Validator.
Description : CSS Validator is a Mozilla Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated.

URL : Html Validator.
Description : HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

URL : Firefox Accessibility Extension.
Description : This Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility.

URL : Total Validator.
Description : The Total Validator Firefox extension provides one-click validation. Once installed all you do is browse to the page you want to validate then click on the TV icon in the browser status bar.

Imaging and Screen Capture Extensions for Firefox

URL : Image Zoom.
Description : Image zoom gives you complete control of the size of most images displayed in mozilla based software. Both individual images or whole pages of images can be zoomed.

URL : ColorZilla.
Description : Advanced Eyedropper, ColorPicker, Page Zoomer and other tools.

URL : Screengrab!.
Description : Screengrab! is an extension for Firefox that makes it easy to save a web-page as an image. With it, you can save anything that you can see in a browser window – from a small selection, to a complete page.

URL : FireShot!.
Description : FireShot is a extension for Firefox and Internet Explorer that captures, edits, annotates, organizes, exports and prints screenshots of your web pages.

URL : Abduction!.
Description : Capture an entire web page or part of a web page and save it as an image.

Overwrite Inline style throgth extrnal css

1. span[style]{
2. color: inherit !important;
3. font-size: inherit !important;
4. }

Overwrite Inline style throgth extrnal css

ID vs Class

One common question when working with XHTML and CSS is whether to use the id or class attribute on an element. There are several rules that you should consider when using either attribute.

1. Will the selector be used more than once within a document?
2. Do the selectors need to be combined?
3. Does the specificity matter?

If the answer to question number one or two is yes, then you need to use a class. Classes can be used more than once in a document whereas id’s cannot. A neat little CSS trick is that you can combine classes, for example:

CSS is the best!

Lastly, id’s have a higher specificity than classes, which means that the styles for the id element will be given priority over the styles for a class.

You can also use both a class and id on a single element in order to gain greater control over the element.

website planing

First Things First

Concentrate on content first. What’s it all about?

Next, worry about functionality. How will it work?

Style or presentation should be last on your list.

If you want to publish on the Web, take a look around. Spend some time surfing the Web and see what’s out there. You can find plenty of examples of bad design and poor planning.

If you see something you like on the World Wide Web, steal it.

I don’t mean you should steal intellectual property, of course. But there’s nothing wrong with taking a look “under the hood” of a Web page and seeing how it’s done. In most browsers, you can view the source code by choosing View > Page Source.

Go ahead — try it right now, on this page.

Project Management

Half of planning your website is project management, which is all about making life easier for yourself.

(The other half of planning is design, which is about making life easier for the people who use your pages.)

It’s essential to develop a workflow. There are a number of steps in the process of creating and maintaining a Web page, and every project is different. Planning will help you realize what those steps are.

A few other pointers before we begin:

• Surf the Web. See what’s out there.
• Don’t be overly ambitious.
• Don’t try to re-invent the wheel.
• Do set aside some time for planning.
• Also set aside some time for learning.
• Realize that maintenance is continuous.
• Have fun with it!

Use Pencil and Paper

Your most important tool for digital projects are good old pencil and paper. Often you’ll do your best thinking with these tools.

I planned this site using a Prism Steno Book and a Sanford Uni-Ball Microtip. Here’s a sample:

Write a One-Sentence Summary

You should be able to summarize your project in a single sentence. If you can’t do that, then you probably need to spend some time focusing your thoughts.

Here’s the one-sentence summary for this sub-site:

These pages will support the “Planning Your Website” seminar and will contain tips for Xavier University faculty on how to plan their web pages, including both project management and design issues.

Here’s the one-sentence summary for the Center’s website:

The CAT website will be a resource to Xavier and Partner School faculty in the areas of CAT initiatives and general faculty development.

---

Make an Outline

To help organize your thoughts, it’s often helpful to make an outline of all the content that you plan to include. I made an outline for this project, and used it as a table of contents — providing an index to all the material.

Make a Flow-Chart

The user’s experience may closely parallel the linear progression of your outline. Then again, it may not. Hypertext allows for a non-linear experience.

You should draw a flow chart to show how you want users to navigate through the content. The chart can be very simple and still very effective for organizing your thoughts. Consider the differences between these two charts:

posted by santosh kori

---