Monthly Archives: May 2011

what is the meaning of the DOCTYPE tag

Definition and Usage

HTML is a constantly changing language. With each step in its evolution, new tags and attributes and coined, while others are phased out or eliminated. Because of this, it’s necessary to specify at the very beginning of your page which version of HTML your code is using by setting the doctype.
The doctype declaration should be the very first thing in an HTML document, before the tag.
# 1 Use your text file or HTML editing software to open the web page you’re creating. You’ll need to place your cursor at the very beginning of the page.

# 2 Determine which doctype you need. A “Strict” document is defined as one containing elements that have not been “deprecated,” which means they have not been labeled obsolete and prone to being discontinued altogether. A “Transitional” document is defined as one that does include deprecated elements, but not frames. A “Frameset” document is defined as including everything a “Transitional” document may include, plus frames.

# 3 Type the following if your document is defined as “Strict”:

# 4 Input the following to define your document as “Transitional”:

# 5 Write to define your document as “Frameset.”

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
Initially when web browsers appeared there were few documents standartizing the way HTML documents were displayed. So different browsers rendered the web pages in slightly different ways. However as the web technologies matured so did the technical documents describing visual rendering of web pages. Moreover new standards like the CSS standard appeared specifically aimed to describe the visual layout of HTML pages. So page rendering that was more or less correct according to the old specifications was regarded as incorrect under the new rules.

At some point in time it became obvious that if web browsers were to become compatible with each other, they had to start visualizing web pages in a standard way according to these new technical specifications. In other words all existing browsers had to change the way they displayed web pages. This would be great for the web designers creating new web pages because designers would be able to write a single HTML page and it would display in the same way on all browsers compatible with the new specifications. There would be no need to add workarounds for different quirks of different browsers – all browsers would display the same web page in the same way.

However this change of web page rendering would be a serious problem for existing pages the ones that had been created before the introduction of the new standards. Often these pages had been created in such a way that they had taken advantage of existing web browser quirks so removing these browser quirks would break rendering of these pages.

That is why browsers introduced several rendering modes for web pages: strict mode (also known as standards compliance mode), quirks mode and almost strict mode. New pages would be displayed in standards mode where all HTML markup is rendered in compliance with the CSS standard. And old pages would be rendered in quirks mode where the browser would exhibit all the quirks of the past browser versions, thus displaying these old pages like their web designers wanted them to display.

Now the only missing piece from our explanation is the “almost strict mode”.This mode is virtually identical to the regular “strict mode”, the only difference being that in “almost strict mode” images are rendered by default as block elements and in regular “strict mode” images are inline elements by default.

So the next question that arises is: How do web browsers decide if a given web page is old (and should be rendered in quirks mode) or new (and thus should use strict mode). The answer is the DOCTYPE switch (or its lack) at the beginning of the web page. Old pages have no idea about DOCTYPE so they never use the DOCTYPE switch. Thus the lack of this word at the beginning of the page tells the browser that this is an old page that should be rendered in quirks mode. If a DOCTYPE is present the web browser inspects it and based on the DOCTYPE value decides if the page should be rendered in strict, quirks or almost strict mode.

Different browsers interpret DOCTYPE values differently but here are some generic guidelines that are respected by most modern browsers:

* If there is no DOCTYPE keyword, then the page is rendered in quirks mode.
* If the DOCTYPE specifies a XHTML document (as opposed to an HTML one) the page is rendered in strict mode.
* If the DOCTYPE value is unknown to the browser, the page is rendered in strict mode.
* Other DOCTYPE values are rendered differently on different browsers. However if you want to render a page in strict mode, you can use the following DOCTYPE values which trigger strict mode on all modern browsers:

Here you can see detailed list of conditions and doctypes that trigger different rendering modes:

* Mozilla Firefox
* Internet Explorer
* Opera
* W3schools

Best addons useful for php | web Developers and Designers

Introduction:
Plug-in (computing), a piece of software which enhances another software application and usually cannot be run independently
+ Add-on (Mozilla), a piece of software that enhances and customizes Mozilla-based applications

1) Web Developer
The Firefox Web Developer add-ons is one of the most popular add-ons for web designers and developers. This add-ons contains a variety off essential tools that allow you to troubleshoot problems easily.

2) Firebug
Aah. What an Add-on. Firebug is a superb add-on for web developers. You can easily check and update your CSS, HTML, Javascript, identify javascript errors and change the look and feel as per your needs.

3) Fireftp
FireFTP is a free, secure, browser based FTP client that allows you to easily connect to your ftp via Firefox instead of opening ftp software seperately.

4) Fireshot
FireShot is an add-on which allows you to take screenshots of your web pages with a lot of functionality like showing arrows, writing text etc.

5) Colorzilla
ColorZilla is an add-on which gives you the easist way to pick the color from your web page without opening any color picker.

6) IE tab
IE tab is very useful for designer and developer both. Using this add-on , you can see the look of IE at a single click in Mozilla Firefox itself.

7) AutoPager
AutoPager will automatically shows the other pages in bottom . This helps you when you are searching in google and result shows so many pages, you dont need to click on 2nd page for look at results. It will automatically shows other pages at bottom.

8)HTML Validator
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. Just as the name of this add-on implies, HTML Validator is all about making sure that your code is up to par. You can also check pages that you are visiting, and thanks to a little indicator in the corner of your browser, you?ll quickly see if the page is in compliance or has errors. Once you click on the indicator you will see a full version of the code that will identify what the problems are.

9) Fire PHP
FirePHP enables you to log to your Firebug Console using a simple PHP method call. FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.

10) StumbleUpon
StumbleUpon helps you discover great websites that match your interests. Simply click the Stumble button and see the best websites. There are over 500 topics to choose from, and, the more you use it, the better your recommendations become!

11) Screengrab
It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. It captures Flash too!

Best php error debugging technique

Debugging PHP code is a nightmare for all Php developers and these are the times when they miss the thread functionality like java in php, However some simple php debugging techniques can help y0u to code faster and thus save very valuable coding time.

There are many PHP debugging techniques that can save you countless hours when coding. An effective but basic debugging technique is to simply turn on error reporting. Another slightly more advanced technique involves using print statements, which can help pinpoint more elusive bugs by displaying what is actually going onto the screen.
So , My debugging tips are (in no particular order):-

1) Live PHP debugging:- Use a editor with inbuilt live Php debug (Like phped ,Phpdesigner, eclipse etc), Editors like editpad, notepad doesn’t support live debugging and thus need to run the php file on browser for finding the errors. These editors run php scripts via command line on every save and present any errors found.

Small human errors like missing a semicolon , not terminating the line correctly, missing brackets etc can be easily found using a live debug php editor.

2) Use Xdebug:-The Xdebug extension allows you to find stack traces and function traces in error messages, memory allocation and protect from infinite recursions happening

It also provides profiling information for PHP code and is having the capability to debug scripts interactively with a debug client.

Xdebug can be found at xdebug.org (Editors like Phpdesigner and phpdebug already contain Xdebug inbuilt )

3) Activate Php error messages:- php.ini contains a lot of configuration options , Among those options there are a couple of options which control the way error messages are displayed to a user. Make sure that following two options are set as follows:-

display_errors = On

error_reporting = E_ALL & ~E_NOTICE

4) Use print and echo statements beforehand at critical points for debug:- This is somewhat a homegrown method that i use for php debugging which i found extremely helpful and useful in debugging big php codes.

While coding i create some virtual sections of code and in these virtual sections i put the echo statement to ensure that the code is passing through that portion correctly and echoing the data correctly that’s required.

But since i can’t left them always on , I put up a debug_check if statement to check whether the code is working in debug mode or production mode.

For example

< ?php $debug_check = 1; foreach ($array as $data) { if ($debug_check == 1) print ($data); } ?>

Here the $debug_check variable is defined at the top of the web script. Once this is changed to 1, it displays all echo and print statements , This is when i am debugging the code.

When i am in production mode i simply change the value of $debug_check to 0 which again hide all echo and print statements, This takes a little more time in coding initally , but proves to very helpful in long run.

5) Use Frameworks:- Frameworks are one of the most important change that is implemented in modern programming , Php frameworks like codeignitor and cakephp provides a lot of functionality for setting up test cases, units and debugging.

6. Debugging PHP is About var_dump

If you’re looking for php debugging techniques, i have to say that var_dump is most times the way to go about it. This command is all you need to echo php information. There shouldn’t really be many cases where you need anything more than dumping values in PHP, in order to debug your code.
Also, Since most of the code is ran via libraries the error messages are nicely crafted and provides inbuilt details.

6. When You Absolutely Need Global Values, Create a Config File

It is a bad practice to create global values for everything. There are limited cases where you would actually need to do so. Doing it for database tables or database connection information is a good idea, but do not use global variables throughout your PHP code. Moreover, it is always a better idea to keep your global variables at a single config.php file.


Some Important Notes to Care With
:

Missing Semicolons – Every PHP statement ends with a semicolon (;). PHP doesn’t stop reading a statement until it reaches a semicolon. If you leave out the semicolon at the end of a line, PHP continues reading the statement on the following line.

Not Enough Equal Signs – When you ask whether two values are equal in a comparison statement, you need two equal signs (==). Using one equal sign is a common mistake.

Misspelled Variable Names – If you misspelled a variable then PHP understands it as a new variable. Remember: To PHP, $test is not the same variable as $Test.

Missing Dollar Signs – A missing dollar sign in a variable name is really hard to see, but at least it usually results in an error message so that you know where to look for the problem.

Troubling Quotes – You can have too many, too few, or the wrong kind of quotes. So check for a balanced number of quotes.

Missing Parentheses and curly brackets – They should always be in pairs. Array Index – All the arrays should start from zero instead of 1.

Moreoever, handle all the errors properly and direct all trace messages into system log file so that if any problem happens then it will be logged into system log file and you will be able to debug that problem.

How to make site fast By minimizing HTTP Request

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

One way to reduce the number of components in the page is to simplify the page’s design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended.

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. As described in Tenni Theurer’s blog post Browser Cache Usage – Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.
Extracted From