Web developers: How do you like to test your sites as you write them?

Question

Because the browser doesn't handle links the same way on the computer as it does on the web ( "/" as opposed to "\" and directory relative urls), I have to upload everything in order to test it or I have to change all my links after I finish testing in order to upload the site. What environment do you test in that will make this process easier?

Answer 1

I suggest you to install Apache server in your computer it's simple installing and working :) also notice that most of the server in web are Apache , if you use windows platform for downloading this incredible server go to : http://apache.us.lucid.dk/httpd/httpd-2.2.3-win32-src.zip
Linux and UNIX already have the Apache any way for this platform go to : http://www.apache.org/dist/httpd/httpd-2.2.3.tar.gz

By default the installation directory is set to /usr/local/apache2

you can put your wen directory under this folder then in your browser type http://localhost/yourwebdirectory , or http://127.0.0.1/yourwebdirectory

for more help go to http://httpd.apache.org/docs/2.2/

Answer 2

------------------------------...
ONLINE WEBSITE TESTING
------------------------------...
How about creating a semi "sandbox" environment? Typically, the sandbox environment would use a replica (not exact, not live production) of the environment, code, test data or a copy of live data in a "safe" simulated environment, and certain potentially dangerous or unrecoverrable function and actions, like modification or destruction of production data, would be restricted. "Users" are given specific profiles dependent on roles which have specific permissions, do you can test functionality for different types of users. The idea is to isolate the code from the production environment until fully functional and QA'd.

To avoid the path problem, make code refs RELATIVE, which is independent of the location when executed (allows use of same code in testing and when uploaded to server which may use a different directory/file hierarchy) instead of ABSOLUTE, which is dependent upon traversing a particular directory/file hierarchy (you will have to change refs when on server to accomodate the existing structure).

--This way involves uploading once. Maybe you can create a "protected", restricted or inaccessible area on your site to upload what you have to do testing. Depending on features and capabilities of your coding method, you may be able to edit online, save changes as you go, and change permissions or a link to make it live. If you are not worried about security or if someone might see the site, you could use this trick. On the index, home or whatever page, go all the way to the bottom in left (or right) corner, make a very small period (.) or other small unobtrusive, seemingly innocent special character. This will serve as the link to the testing site.

--Set up a "testing" server, a separate physical pc or virtual environment locally or on another pc so you can do production testing as if it were a live remote.

--Upload code once to another online area or tool that allows online editing, so you can quickly edit, save and then open another window to view in realtime.

Maybe you can use or modify one of these to suit your needs.

Answer 3

if you can the best way is to have a test environment where you can play with your applications/web sites and makes changes till the meet your standards then upload the project.

Answer 4

I develop from a local web server and use this to test against.

It's unsafe to have to modify code so you can test then change it to go back to live - things get forgotten, and then don't work.

Answer 5

Never use \ in a Web page, even for a local file. Just test your Web pages in the same place in the hierarchy on disk that they'll have on the site; the browser will understand / separators just fine. For example:

Create a directory to act as your root. In that you have files index.html and folders product, service and contact, each of which ALSO have files called index.html.

The file index.html has navigation that looks like this:

Our products
Our services
How to contact us

(Note: actually including "index.html" may be considered unnecessary as the server should look for that file if you leave it out of the link, but it's included here for completeness' sake. Oh, and let's assume these are all SUPPOSED to be on the same row, which of course is how they'll look if you just copy-and-paste that block into a Web page, since I haven't put
tags on the ends of the lines... :-)

Now, the nav bar in product/index.html -- which is "down" a directory" -- looks like this:

Home
Our services
How to contact us

Oh, how exciting... Yahoo!Answers thinks my HTML examples are Something Bad and it's hiding the text in the link I've got set up inside my anchors. Well, that's all right, the "H... to contact us" up there just says "How to contact us." Nothing scary, I promise; they're EXACTLY the same text as the previous link, and the only thing to pay attention to is the way the URL is coded in the a href="" portion of the anchor.

The special code ../ says "go up one directory and then look for the rest of what's in this URL." So from the product directory, saying ../index.html tells the browser to move up one directory relative to wherever it is now, then find the file called index.html.

Saying ../service/index.html tells the browser to go up one directory level, then look for the folder service, then look for the file index.html in that folder.

And yes, it does it on your hard drive as well as on your server's hard drive. Try it out -- copy and paste those two blocks (with or without adding the
tags, as you prefer) and check them, first on your local computer and then on your site.

You should NEVER EVER EVER EVER have to put a \ in a Web page unless you're using it to escape a special character in a Perl script.

The other benefit to coding with relative paths like this is that if you're coding pages that will be handled by different servers depending on the way the DNS is coded, all the links will "just work" whichever Web server the browser thinks is calling your pages. But that's an advanced topic. Or look at it this way -- let's say you have a standard Web page structure that you use for clients Acme, Personal, and Whizzbang. You can use the same navigation for www.acme.com, www.acme.com/product, etc. that you do for www.personal.com, www.personal.com/product, etc. etc.

One other neat trick with dot-path notation: You can use the same text for your Web pages and have each page look very different by using different images WITH THE SAME NAME for each of your clients. You do this by creating another folder called images, then call all your images with tags like this:



Now, that would be for a picture in the file in the root directory. When you're in product/index.html, the image path is:



That displays the same image. But here's the kewl part -- when you upload the images folder to Personal, you use the JPEG you did for their logo -- same name, different look. Then the folder you upload to Whizzbang.com has the Whizzbang logo saved under the filename images/logo.jpg. Same text, COMPLETELY different look and feel.

Some other advantages to putting all your images in the same directory rather than copying the same image into multiple directories -- while it isn't as big a deal in this age of broadband, the browser remembers when it's already downloaded an image and will use the cached version of it rather than re-downloading it. And the browser is smart enough to know that ../images/myimage.jpg is the same file whether it's called from products/index.html or services/index.html. And of course, the main advantage is that it's only one drag-and-drop when it comes time to upload your image file to the server.

Oh, and this works for "invisible" files too, like CSS and JS files. Just make sure that the directory structure you set up on your computer is the same as the structure you're going to use on the server and it all Just Works. (Which means that if you create standard style names and use them in your HTML pages, you can change the font, size, leading, etc. in your CSS file and make the customers' pages look competely different in other ways than just the images.)

Best of luck!