EarthlingsUnited Web Development Day1

The Best Shopping On The Planet
EarthlingsUnited Web Development Day1


About Us
Search EarthlingsUnited
Customer Service

Privatization is the shifting of government functions into the private sector. Privatization is also the transfer of public assets into private corporations. This started in 1980.

Today there is evidence suggesting that privatization has led to systemic government shutdowns and other negative unintended consequences including serious damage to the industrial base, colleges, universities, air transportation, the FAA, and the citizens of the United States.

More Information and Buy

EarthlingsUnited welcomes you to web site development tutorial. This is the most comprehensive e-commerce site development tutorial you will find anywhere at any price. This one is free.


Web Development Tools

Home

Day 1: Web Development Tools
Day 2: Publishing Your Web Site
Day 3: Finding and Building PERL Scripts
Day 4: Search Engines and Traffic
Day 5: Purpose of Web Site and Server Logs
Day 6: Finding a Web Hosting Service
Day 7: Associate Programs / Micro Transaction
Day 8: Demos and Applications

Class Goals
  1. Why am I here
  2. Why are you here
  3. Finding and installing all the tools needed to build a web site
  4. Installing the tools on your PC that will be used for the course
  5. Advanced tools and shareware sites
  6. Breaking down the fear of shareware (system development in late 70's, mid 80's, and now the Internet age)

Introduction

There are 3 broad categories of tools that are used to develop a web site: Authoring, Image / Graphics Management, and Publishing tools.

Authoring - Used to develop HTML content.

Image / Graphics Management - Used to resize images and save in either .gif or .jpg format.

Publishing - Used to transfer files to and from a web server. Files posted on a web server are available for access on the Web.

Tools

Everything starts with tools. You can chose your own tools, but here is our recommended list of PC tools. The following links will download the appropriate software. In most cases there are 2 links to the same tool. The first link is a local mirror of some version of the software. The second links points you to the original site developer.

Microsoft Tools

Billy Gates has enabled all his products to save in HTML format. The feature, if installed is available from the file menu option <save as html>. You need to make sure that you enable all the HTML options when installing his software on your PC. If your company is silly enough to have disabled this feature, then have a serious discussion with someone that can think and influence the proper installation of software. The bottom line is the company paid cold cash for these features and is now losing productivity gains because of a key decision, which hopefully can be significantly justified or changed.

The advantage to using these Microsoft office options is Power Point will produce a ready made slide show web site, while Word will convert all your pictures to .gif images and make the table of contents clickable links. The disadvantage is if you attempt to use Word or Excel for a web page. Billys' stuff generates an enormous number of HTML tags that are not necessary. For example, almost everything is tagged with <font> and its attributes. Simple tables become monstrous things with tags and attributes like column width and color that add no value to the page. The problem with this excess tag generation is that it takes longer to transfer and process than a nice simple page created by a good HTML editor. The large number of tags also creates a maintenance and browser portability nightmare. Bottom line is only use Power Point to create canned HTML pages. Use Microsoft word to create images. Also, if you need a clickable table of contents then use Microsoft word.

Core Tools

Unzip - Used to unzip software that is downloaded from the web. WinZip site

AOLPRESS- Used to create web pages. Its free from AOL, a gift to the community! AOLPRESS site

FTP - A simple tool that lets you FTP files to and from your server. Its free to universities, governments and non profits. FTP Site

FreeFtp- Its a free FTP application.

TELNET - Lets you log on to a server. Should be on your PC. Search for telnet.exe and create a shortcut on your desk top. If you must, then download it.

PHOTOED - Lets you resize, touch up, scan, and save pictures in any format including gif and jpg. A simple thing from Billy Gates if you have any version of Office. Search for photoed.exe and create a shortcut on your desk top. If you must, then download it.

Advanced Tools

HTML Help - A great desktop reference to HTML. HTML Help Site

Search and Replace - When the web site becomes large there are many occasions where hundred of pages need a simple one or two line change. This is an excellent search and replace program.  Search and Replace site

Simple search and replace - This is a simple version of search and replace, but it lets you deal with white space and line returns without being good at regular expressions. Simple search and replace site

TUCOWS - This is probably the best collection of shareware around. Go there, find yourself free and shareware software.

PaintShopPro - This is a really nice image processing tool.

IndigoPerl - This is reserved for when we discuss web servers and PERL. This is a great binary executable for the PC that contains the Apache server, PERL, and many PERL modules. IndogoPerl site

How Do I Begin

The internet requires a different view of the world. It is based on shareware. You should get use to searching for and evaluating shareware on the Internet. That includes web content. To facilitate this mode of operations, might we suggest that you create the following folders on your PC:

where "walt" is replaced with your first name.

Download the software tools listed above and install them.

Fire up AOLPRESS. Feel free to go through the tutorial or just go for it on your own.

Fire up PHOTOED.exe and load a picture that is in any format but .gif or .jpg. For example, go to your windows folder and pick one of the windows back drop pictures in .bmp format. Save the picture in .gif and .jpg formats. Use your browser to open the pictures and view the results. Try setting your .jpg compression value to 75. View the results in the browser and look at the size of the files using different compression ratios. The bottom line is .gif files are for graphic arts and .jpg are for photographs.

Save your first page as "index.html".

Go to your browser (Netscape or Internet Explorer) and open the page up that you just saved in AOLPRESS. Your entire web site can be developed on your PC, without transfer to a server. It just will not be available to anyone else on the network.

After you have a few web pages under your belt that is part of a small site and have some confidence in the process, you can start to become more proficient with HTML.

In AOLPRESS, bounce between the nice page interface and the source page which shows the HTML tags. It's a good idea to become familiar with your most frequently used tags. You will find that you will use about 10-15 different tags at most and you will quickly learn them and recognize web pages that use these tags.

As you browse the web, feel free to select the "view source" option in your browser to see other peoples HTML code. If you like it, feel free to save the page and use it as a guide to develop your own versions of the features. That is what the Internet is about, sharing and growing.

HTML vs XML

HTML uses tags to tell a browser how to display your content. Example tags include:

All contents is bounded with an opening tag and a closing tag except for <P> and <B>. The tags are case insensitive.

XML uses tags to tell an application not only what to display, but what the content is, or what to do with the content. The biggest trend in XML is primarily associated with categorizing data. Some folks in the community think that categorizing the data with XML tags naturally flows from database information and will significantly help search engines in delivering desired search result. IMHO it will never happen because it is too hard / time consuming to categorized information in an HTML page.

Images

Image management is critical to building pages that are pleasant to the eye and download quickly. The author needs to understand a few basic facts about image management.

.gif: This is the ideal format for line art. GIFs have the added benefit of being animated. There are several tools that allow users to build animated gifs.

.jpg: This is the ideal format for pictures. This is a lossy compression format, which means that each time the image is saved information about the image is lost and the image degrades. The level of compression is controlled using a scale for 0 to 100. The ideal setting for the web appears to be 75.

Image sizes fall into 3 categories:  Thumb nails, content images, and standalone images. Establish a standard for your site and use it across all your pages. Thumb nails should be less than 3-5 KB. Content images should be less than 15-50 KB. Standalone images should be less that 200 KB.

 Scanner Resolution: Most folks think that scanner resolution needs to be thousands of dots per inch. That is not true. Scanner resolution behaves differently for printing media than for displaying media. On a display, increasing the dots per inch on the scanner does not increase resolution, it only makes the image larger on the display surface. On printing, increasing the dots per inch does increase resolution, however, scanning much beyond 250 DPI is of no value when printing. A printer rated at 1440 DPI uses a large number of dots to control brightness. The more dots that are printed, the brighter the result, for a given line. So printer resolution is actually in terms of lines. The 1440 DPI printer is capable of printing perhaps 225 lines. So scanning beyond 225 DPI on a scanner is of not value, unless you are interested in enlarging the image. To learn more about graphics for the web go to ScanTips.com.

 Image Sizing:  Always size your images for the final display. Never use the HTML IMG height and width tag attributes to size your images. Reducing image display size significantly reduce image bytes. It is not linear. Additionally, the aspect ratio of the image usually changes when you attempt to resize it using the HTML tags and small changes in aspect ratio significantly degrade the image display quality in some cases.

Computer System / Applications Development Trends

The term hypertext was coined by Ted Nelson, a Swarthmore College graduate who was a Harvard graduate student in 1960 when he began writing a computer program to link portions of text in a nonlinear fashion. He introduced the word hypertext in a paper delivered to a professional group, the Association for Computing Machines, in 1965.

The idea of linking text, visuals and sound in an interactive way found its first popular use in Apple Computer's HyperCard, which came bundled with the Macintosh in 1987. Two years later, Tim Berners-Lee proposed the World Wide Web, and it was 1993 when Marc Andreessen introduced the Mosaic Web browser, which took hypertext to the masses.

1970's Very capital intensive, formal training programs applied to entire staff, detailed custom vendor documentation - Hardware budgets swamps other costs - significant organizational support.

1980's Hardware prices falling rapidly, less formal training programs applied to limited staff, some custom vendor documentation - Hardware budgets start to match other costs - limited organizational support, you need to find your own resources, frequent visits to book stores.

1990's Hardware no longer capital intensive, no vendor documentation, no formal training programs - Other budgets, if executed exceed hardware costs - you are on your own - frequent visits to book stores now replaced by accessing and learning from web sites.

2000's  Without access to the web, you can't find the info you need to build your solutions.

The cathedral and the Bazaar Paper
The cathedral and the Bazaar Site

Strongly Suggested Reading

1998 CassBeth E-Commerce Findings
Your Desktop HTML Reference Guide
Internet Tutorial



Top of Page

Star Wars Episode I - The Phantom Menace Hear My Cry Sonique Creator Genesis - The Lamb Lies Down On Broadway You

Tools
   Drills Sanders Vacs ...
Electronics
   MP3 Players DVD Players Camcorders VCRs CD Players ...
Office Supplies
   Inkjet-Cartridges Mouse-Pads Phones Projectors Shredders Toner-Drums ...
Computers
   Printers Scanners Software Office Supplies ...

Books
  
University Text Books College SAT Prep Books ...
Gardening
   Barbeques Lighting Patio Furniture Pest Control Planters  Ponds Storage ...
Gourmet Cooking
    Blenders Juicers Espresso Knives Mixers Pots Pans Cookers Toasters ...

DVD & VHS Videos
   Hollywoods Greatest Movies Action Adventure ...
Music CDs
   Rock Oldies Musicals Karaoke ...
Toys
   Beanie Babies Furbys Games Electric Trains ...
Games
   Nintendo Sony Playstation Games Sega ...

Special Places
   TV Shows Dr Who Videos Alien and UFO Media Red Dwarf Videos Star Trek Videos

.

Welcome to another year of cyber shopping at earthlingsunited. We organize and humanize access to shopping on the entire web, like no other portal on the web. Please don't forget to tell your friends about our special place. Thanks and enjoy your visit.

3.5 5/18/2001 12:45:33 15743 0


EarthlingsUnited . About Us . Search EarthlingsUnited . Customer Service . Privacy
Copyright © 2000 All Rights Reserved