Class 12 – How to Make Money on the Web

Start-ups

The web, at barely fifteen years old, is still an open field for innovation and entrepreneurial zeal.  This is in a large-part due to the low up-front costs in starting up a web-based business.  The initial investment of many web-based businesses is relatively low, compared to traditional businesses, while the potential rewards, given the huge potential market of web visitors, are ever-increasing.  You don’t need to buy any raw materials to set up shop online – you don’t even need to be in the same country to which you sell products or services.  You just need some understanding of web development and a sharp mind for opportunity.  Of course, it goes without saying that most start-ups fail.

Start-ups, when first starting out, will generally be low on cash.  To get cash, they will usually have to raise money from investors.  To raise money from investors, they will usually have to show investors the promise of what they are developing.  So, as a generalization, start-ups will often ask people to work for less money than they can make elsewhere so that they can keep their overhead low and develop their technology enough to attract investment, at which point they will hopefully be able to pay people adequately.  Instead of cash, they will often offer employee  stock options, meaning that employees have equity and stand to gain (sometimes hugely) from any future company profits.

To sum it up: make sure that whatever you stand to gain is worth the lower pay and higher risk than other forms of employment.

Agencies

Web developers need not be entrepreneurs.  Since the late 90′s, interactive agencies have popped up left and right to bring the marketing and advertising skills perfected at ad agencies of the past into the new domain of the internet.  Many of these agencies were originally print ad agencies which have transitioned into the web.

Going with the old ad agency model, these businesses have transformed the originally ad-hoc process of building websites into a results-oriented industrial assembly line process.  As in any industrial manufacture, web or interactive agencies divide interactive accounts into specialized work roles, where each person plays a small part in building and promoting brands on the web.  And it’s not just agencies – any medium to large corporation will have a web department handling a variety of functions, often in the same streamlined process (but by no means always in this way.)

Agency work is a good way to experience a wide variety of different types of websites within a very short period of time.  Agencies also have a regular flow of employees going in and out, meaning that it is sometimes easier to find work with agencies than with other, less dynamic, companies.  The pay is usually decent and standardized.

Large commercial brands will often hire agencies not because they are especially creative, but simply for the reason that they are reputable, large, experienced, usually heavily insured, and familiar with dealing with many types of clients.  Agencies often subcontract their work to more specialized firms who do design or development for them.  There is a whole feeder industry surrounding agencies.

Careers

Here is a short list of web-related jobs that one often sees advertised at interactive agencies, corporate web departments, and web design shops:

• Creative Director
• Interactive Director
• Product Manager
• Project Manager
• Web Marketer
• Web Producer
• Account Manager
• Web Strategist
• Content Strategist
• Web Marketer
• Media Planner
• Media Buyer
• Web Analytics Specialist
• Community Manager
• Information Architect
• User-Experience Designer
• Web Developer
• Front-End Developer (client side)
• Back-End Developer (server side)
• Flash Developer
• Flex Developer
• Web Designer
• Graphic Designer
• Q/A Engineer

Pay

A contract web developer can make anywhere between $15-$150/hour.  On the low end, you find newly minted developers with very little experience, as well as outsourcers from countries with a low cost of living.  On the high end, you get experienced consultants with years and years of experience and a proven track record of results with many former big-name clients.

As full-time employees, web developers can again make anywhere along a wide range of salaries: from $30k to $180k.  It depends, as with anything else, on experience and knowledge of the industry, as well as the type of company you work for.  Non-profits and start-ups tend to pay less than interactive agencies, but they often attempt make up for that gap with perks such as interesting work, good benefits, idealistic projects, stock options, etc.

What to charge your first client

Not a lot.  Explain to your first few clients that you are trying to gain experience, and be fair in your pricing.   You want to be able to develop accurate estimates of how long various types of jobs would take you, and price accordingly.  But to start with, things will take you a long time, and so it may be better to price your work as a flat fee for the entire project, rather than by the hour.  Give your clients a break, so long as they are lenient with you.

Once you get comfortable with how quickly and well you are able to complete jobs, which will happen sooner than you think, start raising your prices.

Recruiters

Many technology and design recruiters and staffing firms exist to match job applicants up with companies in need of specialized help.  You should be aware that recruiters generally charge clients much more than they pay their employees.  It is not unusual for them to take a 20-50% cut.  So if you are hired by a recruiter to work a job for $60/hour, you should not be surprised to learn that the recruiter is charging the client $100/hour and keeping $40 for themselves for every hour you work.

If you use a W-4 tax form with the recruiter, where they withhold taxes on your behalf, they may provide insurance, retirement plans, and other perks similar to those of a full-time employment.  However, if you have a corp-to-corp relationship and file your income from the recruiter on a 1099 form or similar, you do not get those perks, and you may be able to use that fact to negotiate a slightly higher rate since the recruiter’s expenses in hiring you will be significantly less.

Jobs sites

There is no replacement for networking anywhere and everywhere.  However, there are some popular jobs sites as well.  Here is a list of a few I know of:
http://newyork.craigslist.org
http://hotjobs.com
http://monster.com
http://dice.com
http://simplyhired.com/
http://elance.com

Trends

E-commerce is still in its infancy.  To those of us who have ordered all our holiday presents online  for years, it may seem like e-commerce is a saturated market.  But in fact, industry analysts predict massive growth in e-commerce in the coming years as more and more businesses move onto the web and new markets open up as more and more people become web-enabled.

For years, the industry has also chattered a lot about convergence – the meeting of markets like e-commerce, mobile devices, publishing, telephony, television, and web marketing.  With the explosive growth of web-enabled phones like Blackberry, iPhone, Android devices, VoIP, Kindle, and P2PTV, the web as we previously knew it is becoming more and more intertwined with the mobile device and with other broadcast technologies.  This may explain the enthusiasm with which investors and technologists embrace otherwise inconsequential products like Twitter which seamlessly bridge the divide between web and mobile.

An interesting artifact of the lowering cost of mobile and web-based technologies is the developing world’s embrace of mobile phones, and SMS (text messages).  Since many developing countries lack the telecommunications infrastructure required for high speed land lines for internet connectivity, and given that mobile phones in many places other than the US are very cheap to begin using, more and more people are communicating and accessing information through mobile phones and SMS, which work on cellular and satellite networks.  These cell towers and satellite systems bypass the more traditional methods of accessing the internet that we in the US are accustomed to, such as DSL, cable, or T1 lines.  This difference in access may have interesting implications for the development of the web for a more global audience.

The use of online technology for education is also growing every year as more schools offer distance learning programs to attract wider student bodies.  And childhood education has embraced technologies like online resources and electronic whiteboards that allow students to interact with a teacher’s console using handheld devices as they find that under-performing students fare better when taught with technological devices.

Google

Google makes money almost entirely through advertising.  Almost every product and innovation they release is geared towards bringing more traffic to their search engine and analyzing traffic on all of their sites for metrics which can be used to sell targeted advertisements to their users.  By providing extremely userful applications like Google Maps and GMail, Google drives users towards their search engine and their advertisements while collecting data on users’ interests and habits to better refine their targeted advertisements.

Web Advertising

Web advertising is traditonally priced in one of two ways:  CPM or CPA.   CPM stands for Cost-Per-Thousand – it means the price an advertiser is willing to pay to have 1,000 people view their advertisement.  CPA stands for Cost-Per-Action, sometimes also known as Cost-Per-Acquisition, or Cost-Per-Conversion.

It used to be that advertisers paid sites like Yahoo, Microsoft, and Google on a CPM basis to run their ads.  However, in recent years, advertisers have seen a drop in the number of people who view an ad and then actually click on that ad.  The click-through rate of web advertisements has dropped so much that today, only a few tenths of a percent of people will actually click ads they see on the major web portals.  Estimates vary, but click-through rates for web ads are said to be anywhere between 0.1% to 0.3%.

So many advertisers have switched to the CPA model, where the amount they pay depends on a more concrete metric, such as how many viewers perform a particular action that results from the advertisement.  An “action” in this context could be anything, such as registering for a site, signing up to receive more information, or buying something.  The term “conversion rate” refers to the percentage of viewers of an ad who end up taking such a follow-up action.  Web marketers spend a significant amount of their time worrying about these numbers.

Targeted advertisement is all the rage, since a site that can collect the habits and preferences of a visitor can then run advertisements that are more likely to appeal to that visitor. They can therefore charge more of the advertisers since the click-through and conversion rates are likely to be higher.

Facebook & Twitter

Nobody really knows how Facebook, Twitter, or similar popular social network services will become profitable if they ever do.  But the major social networks have hundreds of thousands to hundreds of millions of users, which means they have a huge number of eyeballs looking at their sites every day.  The potential for advertising revenue to those eyeballs is great, especially considering how many users have voluntarily indicated preferences and affiliations with their favorite brands.  Facebook is thought to perhaps be already be profitable based on its heavy advertising.  This may explain some social networks’ high stock valuations.  However, such companies, which seem to rely on buzz and the good-will of their users, are extremely wary of alienating those users by overrunning the sites with advertisements.  Hence you will see them trying to advertise in roundabout ways, such as Facebook’s Beacon service, or selling user data to third parties rather than using it themselves for targeted advertisements.

By offering additional services like mail, applications, photo sharing, and such, Facebook is hoping to prevent people from abandoning their site in favor of the next big thing, as happened to its social network predecessors like Friendster and to a lesser extent, MySpace.  The more effort people put into curating their online personalities and profiles, the less likely they are to abandon the site and thereby waste all that effort.  I would not be surprised to see Twitter start doing the same.

Some people argue that Facebook’s valuation may be an indicator of investors’ faith in its viability as a “Web OS”, an operating system that runs entirely on the web and upon which you can build more sophisticated web-enabled social networked software products.  Maybe the future will see Facebook transform into the next Microsoft.

Mobile

It should be obvious that the mobile web is the next big thing.

Class 11 – Misc links for today

• CSS contents and browser compatibility from Quirksmode.org.  This chart shows a list of CSS properties and the differences in browser support for them.

• Image resizing in PHP – there are two sets of libraries that can do image resizing and other processing in PHP: MagickWand with ImageMagick and GD.  Our server only has the GD libraries installed.  Here’s a tutorial that claims to simply explain resizing with GD.

• Creating a PDF in PHP – relies on PHPLib PHP libraries which are not installed on our servers, but may be installed on other servers.
• Twitter API Wiki
• Bitly API
• TwitPic API
• Facebook Platform Documentation / Facebook For Website / Facebook Share button

Class 9 – Final Project Requirements

DEADLINE

• All final projects must be complete by the last day of class.

REQUIREMENTS

• projects must show your mastery of the technologies we have learned in this class: XHTML, CSS, Javascript (using JQuery), PHP, and MySQL.
• projects must be completely information architected before you start programming
• projects must involve at least 3 distinct web pages.
• you are required to present your site to the class on the last day of class
• all filenames must be all lowercase with no spaces or special characters except underscore “_”
• all variable names in PHP and Javascript must be written in lower camelCase.
• all CSS class names and IDs must be written in lowercase, with no special characters except the underscore “_” character.
• final projects must be working and accessible on the web (if it only works on your client machine, it is not a working web site)
• projects must be linked to from your blog.

GRADING

Grades will be based on your ability to exhibit mastery of Information Architecture and Web Development programming techniques.

• Information Architecture (20%)
• Programming (50%)
• Ability to conceptualize and realize a fully-functioning, well thought-out site (30%)

PRESENTATIONS

You will be required to present your work to the class on the last day of class.

Presentations should be no more than 10 minutes.

Here are some suggested questions to answer in your presentation:

You

• what’s your name?
• remind us… what do you do when not in this class?
• did you have any previous design or development experience?
• any previous experience with the web?

Concept

• three sentence description of your site
• why did you decide to build this site?
• who is your intended audience?
• does this site serve a particular need, either personal or business?

Information Architecture

• how many main pages are there, and how are they conceptually related?  In other words, what is the hierarchical structure of the site?  Perhaps show a simple sitemap diagram to help explain.
• what are the main navigation elements people can use to get from one page to another?
• is there a consistent header, footer, or navigation section on every page?
• how does a user know where they are in the hierarchy of your site?  Breadcrumbs?  Highlighted navigation links?  Or is your site so simple a user couldn’t possibly get lost?
• what kind of content are you showing on each page?
• how are the bits of information on each page related to each other (if at all)?
• what is the most important info on each page, and what is the least important info, and how did that affect the layout of the page?

Design

• what were you thinking in terms of design of your site?
• what design techniques did you use to get the pages to look as they do?
• did you borrow any design ideas from other sites?
• are you happy with the design of your site?

Development

• are you using page “templates” in PHP?
• is there anywhere where you are passing data from one page to another?
• is your data stored in a database or hard-coded into the XHTML?
• if using a database, did that make development easier, or more difficult?
• are you using Javascript, JQuery, and any JQuery plugins?
• did you use any AJAX, and if so, where?
• discuss any interesting development challenges you faced in any of these technologies.

The future

• is this site a good representation of what you originally planned?
• what remains to be completed on your site?
• what parts do you think work, and which do you think don’t work?
• do you plan to continue developing this site?
• are you hoping to actually launch it as a real website?
• are you planning to continue with web development?
• what parts of web development interested you most?
• what parts of web development interested you least?
• how has this class reinforced or changed your view of the web?

Class 10 – An MVC Social Network Example

Let’s say that we are building a social network.  What we call a social network is a site that has a bunch of users, and those users can decide to be “friends” with any other user.

You can view this example live here.

The Views

There will be four pages that the user sees:

• Register – where new users go to register to become members
• Login – where registered users go to login
• Home – a page that shows a list of the logged-in user’s friends, and a list of people who are not his/her friends.
• Friends’s Profile – a page that shows details about another member

Each “page” requires a View in order to be displayed to the user in the browser.  Anytime there is something displayed to the user, we should know that there is at least one View used to create that interface.  So we can say that there are four Views in this application.  In our example application, the files that contain the templates for these Views are:

• views/register_view.php – the template for the Register page
• views/login_view.php – the template for the Login page
• views/index_view.php – the template for the Home page
• views/profile_view.php – the template for the Friend’s Profile page

The Controllers

• We only want to let a user go to the Login page if they are not already logged in.  If they are already logged in, we need to redirect them to the Home page. Anytime we have a script that performs some logic like this, we should consider it a Controller.
• Likewise, a user should only see the Register page if they are not already logged in.  Again, this logic is handled by a Controller.
• Assuming a user is not already logged in, when they enter their username/password in the form on the Login page and click the submit button, there has to be some script that performs the logic to compare the username/password data the user entered in the Login page to the user data stored in the database. If the username/password matches what is found in the database, this script has to let the user in to the site.  This logic is the job of a Controller
• Likewise, when a user fills out the Register form and clicks submit, a script has to check to make sure they entered a valid username/password, and then if everything is ok, the script has to somehow create a new row in the database that stores that username/password.  Then the user should be redirected to the Home page.  This business logic is the job of a Controller.
• The Home page needs to check to make sure the user is logged in.  It then needs to retrieve the list of friends of the logged-in user, the list of people who are not friends of the logged-in user, and then display that data to the user.  The decision of what data to retrieve from the Model, and the job of then forwarding that data to the View which displays the interface, is the job of a Controller.
• The Friend’s Profile Page has the same type of Controller as the Home page.  Data must be retrieved from the Model, and then that data must be properly inserted into the View for this page.  So a Controller must be present to take care of this.

The Controller scripts that I have created for this application to handle these tasks are:

• authenticate.php – handles all tasks related to Login and Register functionality
• index.php – handles all tasks related to viewing the Home page
• profile.php – handles all tasks related to viewing a Friend’s Profile
• friendship.php – handles all tasks related to adding/removing friends

The Models

As should be clear by now, Models are necessary to handle the parts of this site where direct access to the database is needed:

• compare any username/password combo to those already stored in the database (necessary for the Login and Register pages)
• create a new user in the database (necessary for the Register page)
• create/delete friend associations in the database (necessary for the Home and Friend’s Profile pages)
• get a list of a user’s friends (necessary for the Home and Friend’s Profile pages)
• get a list of people who are not a user’s friends (necessary for the Home and Friend’s Profile pages)

The Model scripts that do these tasks are:

• models/User.class.php – handles any tasks related to creating, reading, updating, or deleting users
• models/Authentication.class.php – handles any tasks related to logging in or registering a user
• models/Friendship.class.php – handles any tasks related to friendships between two users
• models/Santize.class.php – handles any tasks related to data sanitization

To be consistent and complete, I have added the standard CRUD functions to each Model script, as well as the functions which handle each of the database-related tasks listed above.

It’s object-oriented

You can see that I have created seperate class files for each Model.  I am combining MVC architecture concepts with object-oriented programming techniques.  I have created classes for each type of “object” or “entity” that I think may conceptually need specific actions taken on it.

Object oriented programming is a seperate concept from MVC architecture.  But I have used this example to exhibit both.

It uses a home-brewed framework

You can see that I have organized my code in a specific way.  All Model files are contained in the models/ folder.  All View files are contained in the views/ folder, and all Controller files are contained in the root folder.  Javascript files would go in the scripts/ folder.  Style sheets are in the styles/ folder, and database connection info is in the dbinfo/ folder.

One of the core features of a so-called “framework” is a clear organization of the files involved in a project.  So you could call this organization that I have come up with a sort-of home-brewed framework.  It is very simple, and crude, but it is effective at helping organize our MVC object-oriented application.

The popular frameworks that PHP developers use, such as Zend, CakePHP, Symfony, and CodeIgnigter, do much more sophisitcated things than just seperate your code into folders.  So I doubt my framework will become the next big thing.  But it is useful for our purposes nonetheless.

What the user sees

It’s important to note that the users will be completely oblivious to our use of an object-oriented MVC architecture.  This is a good thing: you don’t want users to have to worry about how a site was developed.

When a user goes to the Login or Register pages, they will see the address authenticate.php in the browser address bar.  This is the Controller script that we know handles all tasks related to logging in and registering.  This controller figures out whether the user wants to see the Login Page or the Register Page, and loads up the appropriate View for either page.

When a user goes to the Home Page, they see the address, index.php.  This, as we know, is the Controller file for the tasks related to the Home page.  This Controller calls functions in the Model that get the data related to the Home page, and then this Controller loads up the View file for the Home page, which displays this data nicely.

Similarly, when a user goes to a Friend’s Profile page, they see the address, profile.php in the browser’s address bar.  This is the Controller file for all tasks related to viewing the Friend’s Profile page.  This script gets all the data by calling functions in the Model, and then includes the appropriate View file to display that data.

Class 10 – Favicons

Favicons are the little icons that show up in the address bar of the web browser for some websites. For example, the favicon for blogger.com is the little orange square with the B in it.

Favicons are totally optional, but a well-designed favicon can add a slightly more sophisticated feel to your site, even though the user may not ever realize it is there.

So of course, you will want to create a favicon for your own sites. Favicons are 16 pixels wide and 16 pixels tall.  They are saved in a special .ico image format that is not natively supported by graphic design programs like Photoshop. This article has a good explanation of how to download a Photoshop plugin that lets you save favicons in .ico format using Photoshop.

If you don’t have Photoshop, you can still create favicons by using a variety of website services that convert standard .jpg, .gif, or .png image files into .ico format. For example, here is one such site.

To use your favicon once you have created it, make sure the file is named favicon.ico, and put it in the root folder of your website. Then add the following code into the <head> of your XHTML code:

<head>
  ...
  <link rel="shortcut icon" href="./favicon.ico" />
  ...
</head>

Class 10 – Fancy URLs: Customizing Your Site’s URLs Using Mod_Rewrite

Now that you know all the basic techniques of web development, it’s time to start thinking about aesthetics. One the most obvious aesthetic choices you can make on your site is what domain name you choose, and what you call the file names on that site. Domain names are something I can’t help you with, but the rest of the URL after the domain name, including the folder and file names, is something I can help you beautify.

This is an advanced topic, but one that can provide polish to your sites if you are comfortable with all we have covered so far.

The problem: ugly URLs

As you know, depending on what we call our files and how we use the query string to pass data from one page to another, we sometimes end up with URLs that look like this:

http://onepotcooking.com/index.php?post=19&view=rss

But you might rather have URLs that look like this:

http://onepotcooking.com/rss/post/19/

And actually, search engines sometimes prefer more descriptive URLs, so they can more easily determine what a page is about:

http://onepotcooking.com/rss_feed/why_urls_should_be_pretty.html

But you don’t want to change the structure of your folders and file names, and change the entire way you use the $_GET, $_POST, and $_REQUEST variables in PHP just to make the URLs pretty. When you’re coding the site, you’re usually thinking about functionality and getting the job done, not aesthetics.

The solution to URL woes: mod_rewrite

Apache, the most popular software used by web servers to handle the requests and responses for web pages (and the software used by our class server and most other UNIX/LINUX web servers) comes with a module called mod_rewrite that is used for creating custom URLs.

mod_rewrite lets you publish fancy URLs like:

http://onepotcooking.com/isnt_this_a_prety_url.html

But have them actually get converted internally into ugly URLs like this, without the user ever seeing it:

http://onepotcooking.com/process_something.php?id=1884&to_do=something&this_is=ugly

You will be able to use the fancy URLs for any links to your pages, but your folders, filenames, and PHP code will not have to change, so long as you use mod_rewrite correctly.

Rewriting vs. Redirecting

This process of having fancy URLs that get internally converted by the server into ugly URLs is known as URL rewriting. With a rewrite, since it only happens internally in the server, the user only ever sees the fancy URL. They will never see the ugly URL in the browser address bar.

However, the term redirect is generally used to refer to the technique where client, meaning the web browser, handles the redirecting. In the case of a client-side redirect, the user can see the final destination URL in the browser’s address bar after the redirect occurs. So they will ultimately see the ugly URL clearly in the address bar of the browser.

Another look at the client/server request/response relationship

To understand how mod_rewrite works, it’s important to understand where it fits into the whole request/response relationship. Here’s a very broad overview of the just relevant steps of what happens when a client requests a file from a server:

• a user tries to load a web page in the browser (whether by going directly to a URL, clicking a link, submitting a form, or making an AJAX request)
• the browser sends an HTTP request (either GET or POST) for the file to the server.
• the server receives the request, and launches Apache’s request handler
• Apache tries to figure out how to respond to the request
• Apache first checks mod_rewrite settings to see if it should do any fancy processing of the URL of the file that the user is requesting
• Then, if Apache determines that the requested file is a PHP script, it launches the PHP engine and sends any data that was passed along with the request to the PHP script that the browser requested
• The PHP script runs and sends its output back to Apache
• Apache sends a response to the web browser. The response contains an HTTP status code indicating some information about whether the request was processed properly or not, as well as any content that was output by the requested file, regardless of whether it’s a PHP script, HTML file, CSS file, Javascript file, or any other type of file.
• The browser receives the response from Apache, and figures out how to display whatever content it received back from the server to the user.

As you can see, the mod_rewrite technique we will be discussing that allows sites to use fancy URLs will occur after the server has received the request from the browser, but before it has passed that request on to the PHP processor. It will be written in language that Apache can understand, not in PHP, since when it is processed, the PHP engine hasn’t even been launched yet.

Apache configuration files: httpd.conf and .htaccess

When a user requests a URL like this:

http://onepotcooking.com/spring2010/test.php

the Apache server checks two sets of configuration files to see whether it should do something fancy with that URL.

First, Apache checks its main configuration file, called httpd.conf, which is usually buried somewhere obscure in the deep recesses of the server filesystem. Httpd.conf has global settings that apply to your entire site. If you have a shared hosting plan for your site, which most of you will do, you do not have access to this file.

After it has checked httpd.conf for any relevant settings, Apache then checks the directory-specific configuration files called .htaccess, which have settings that apply only to specific folders.

With the example URL above, Apache would have to check for the existence of either of these two .htaccess files:

/.htaccess
/spring2010/.htaccess

Since the requested file is nested inside the spring2010/ folder, which is inside of the root / folder, either of those settings files could have an effect on how the request for the file is handled by the server.

We will be focusing on settings in the .htaccess files since these are the ones you will always have access to, regardless of your hosting setup. However, the same URL rewriting techniques will be applicable to settings in the httpd.conf file, with slight modifications.

How to use .htaccess files to rewrite URLs

Rather than rewrite an entire tutorial on how to rewrite URLs (which I initially started to do), there is an excellent tutorial already written which covers all the basic types of rewriting you are likely to do:

http://corz.org/serv/tricks/htaccess2.php

Note: Although I don’t think it’s clearly described on this site, all of the example code written there is meant to go into a file called “.htaccess” located in the root folder of your project. So if your project is at http://onepotcooking.com/johnhancock/final_project/, you should create an .htaccess file located at /johnhancock/final_project/.htaccess, so you can create fancy URLs like http://onepotcooking.com/johnhancock/final_project/this-is-a-fancy-url.html

In other words, fancy URLs only work at the level at which you put an .htaccess file. If you want a fancy URL like http://onepotcooking.com/this-is-a-fancy-url.html, you need to put an .htaccess file in the root folder of the server, /.htaccess.

I highly recommend you read that otherwise well-written document linked above if you wish to use fancy URLs on your own sites.

An example page

I have created a single example PHP script which can be accessed by a number of fancy URLs by taking advantage of rewriting rules found in a .htaccess file in the same folder. The PHP script just outputs whatever data was passed to it in the query string along with the GET request.

In other words, there is an .htaccess file which is allowing a variety of fancy URLs to all internally point to the same PHP script. Each URL is meant to exhibit a slightly different aspect of URL rewriting that may be useful to you. Several of them focus on passing data through the query string even though there is no query string in the fancy URL.

You will definitely want to read that tutorial linked above before going in to read the code in this example.

The direct URL to the example script is http://onepotcooking.com/examples/class10/mod_rewrite/index.php

The fancy URLs that internally rewrite to that same script are listed on that page.