Most of you already know about the Internet and the world wide web (if you are not sure, check out this page, and this page to understand how they differ). The Internet is helping us collaborate in ways which were either impossible or extremely difficult in the past. Even though it may not single handedly eradicate world hunger, poverty, and war, I believe that the Internet can and is playing a role in helping people understand each other, earn money, and live in peace.
In this course you will learn how to make web applications, so you can create a company in your garage and become a millionaire :-)
Now that you understand the difference between the Internet, and the world wide web, it may be a good idea to understand from a user perspective, what makes a good web site. Head over to this page written by Phillip Greenspun to understand more of what makes a great website, and what makes a website a ripe candidate for suck.com. After you are done, check out this page, to understand the financial potential of building Internet applications.
Now that you have finished reading the pages liked to above, you can start preparing for the first activity. In this activity, you have to create a simple one page static website. To do this, you will need a webserver on which you will deploy your website. You can choose any webserver you wish to work with. We have listed a few popular web servers below. Don't worry too much about making the right choice for the web server, since you can always change it for future activities, if you do not like it. Select something and start working.
Web Servers:
- Apache web server
- Lighttpd
- Tomcat (Use this if you intend to use for Java programming the web application)
- Jetty (Use this if you intend to use Java for programming the web application)
- Microsoft IIS (Use this if you intend to use ASP.NET for programming the web application)
Learning Objectives for this section:
- What is the web
- What is a web server and a web browser
- What is the HTTP protocol
- What is HTML
- How to install, setup, and start a web server
- How to point the web server to an application
- How to connect to the application from a web browser
- Basic HTML designing and best practices
- Basic HTTP request / response (also include headers, mime types, error codes)
- usability 101
Reference:
Activity 1: Install the web server of your choice
Create a blog post explaining all that you have done, along with your notes. Submit a link to your blog post in the 'activity submission' form below.
- Install a web server on your system
- Create a simple web page 'index.html' for your static web page. Use well formed HTML and make it clean and readable
- Start your browser and load the url which will display your page. For most web servers it should be http://localhost:8080 , but it might be different for your server. Check the manual if you cannot view the page
- Create a simple stylesheet style.css and use it for styling your web page. Understand why using a stylesheet is a good idea
Create a blog post explaining all that you have done, along with your notes. Submit a link to your blog post in the 'activity submission' form below.
Activity 3: Install a plugin for your web browser which will let you examine HTTP requests and responses. Look at the request and response when you view your web page. Try and understand what the request means and also understand the request and response headers
Create a blog post explaining all that you have done, along with your notes. Submit a link to your blog post in the 'activity submission' form below.
My Notes
Activity1:
Downloaded Apache for Windows (32-bit) from http://httpd.apache.org/download.cgi#apache22
Checked the MD5 sum, and installed it using 'typical' installation on a Win 32 box.
Since this was an msi installer, Apache was installed as a system service. I re-started the service and pointed my browser to localhost port 8080... no luck... tried port 9090... no luck... checked the configuration file and realized that Apache had started on the default port 80. Pointed my browser to the default port and saw the "It Works!" message.
Activity 2:
I found the document root by looking at the configuration file. There is a line which states:
DocumentRoot "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs"
So the document root is in the htdocs directory. Opening this directory revealed a file called index.html, which contained the "It Works!" message. This is the file I need to modify for this activity.
I modified index.html, and added some content to it. For the styling part, I had read about less css sometime back, and was keen to try it out. I implemented the style sheet using less css.
Activity 3
Since I am using Firefox (ver 6x), I installed the Firebug to examine request and response headers.
I can see the following request headers (below I mention the headers and what they mean):
Host - The domain name of the server (I wonder if it will include the port if server is on a non-standard port)
User-Agent - This is the user agent string. It identifies the browser which made the request.
Accept - Content types that are acceptable
Accept-Language - Acceptable languages
Accept-Encoding - Acceptable encodings
Accept-Charset - Acceptable charsets
Connection - Specifies if the connection will be closed after the response is sent, or whether it will remain persistent
If-Modified-Since - Allows 304 not modified to be returned if the requested content has not been changed.
If-None-Match - Allows 304 not modified to be returned if the requested content has not been changed.
Cache-Control - Can specify to all caching mechanisms from the client to the server, whether this object can be cached or not
I can see the following response headers (below I mention the headers and what they mean):
Date - The date when the response was generated
Server - The server
Last-Modified - When was the last time the response was modified
Etag - Identifier for a specific version of a resource
Accept-Ranges - What partial content range types this server supports
Content-Length - The length of the response body in octets
Content-Type - The mime type of this content
No comments:
Post a Comment