Internet Tools
and "The Process"
The Process
Most commonly web pages are created using an HTML editor,
various graphics and multimedia tools and then uploaded to
a webserver in a proper file/folder hierarchy using FTP.
In todays world there are also drag and drop editors such as Dreamweaver
or InDesign or such online editors such as Microsoft Frontpage or
Adobe GoLive where you can also create web pages live on the web
and where you never have to see the code. However to truely
be able to customize your pages- being able to read and write HTML or Scripting languages
such as Javascript can give you an incredible advantage over using the drag and drop tools.
Also understanding the various browser limitations and hardware limitations
will also help you understand why things may display differently on different versions of browsers.
Freeware, Shareware and Payware
Download Sites
There are many places to obtain software on the web either
directly through software developers or through download
sites which are clearing houses for various Freeware, Shareware and Payware software.
These are a few of my personal favorites:
HTML Editors
HTML must be written in a text form known as ASCII format.
Not all layout programs or text editors write text in ASCII format so
it is important to know which ones do or how to convert non ASCII formatted text.
The two simplest of HTML ASCII text editors are
Simpletext ( Mac) and NotePad ( Windows PC).
They are both down and dirty no frills text editors which
come in handy many times for ripping and grabbing code.
More advanced HTML editors often have pulldown menus or Toolbars
which can help speed along the process of writing code.
2 great MacIntosh full featured HTML Editors are
BBEdit and PageSpinner.
(There are many others)
The greatest feature beside the Toolbars is the ability to
toggle back and forth between your Editor and your prefered browser.
So in essence you can write code then hit a preview button which launches
and displays a browser window so you can immediately see the code changes you have just written.
For PC Users EditPlus and Allaire Homesite come highly recommended as
well as CuteHTML and CoffeeCup HTML for simpler editors.
Imaging Tools
There are a wide range of imaging tools and conversion tools for web use.
Most Images on the web need to be either .jpeg ( .jpg) , .gif or .png files.
For example browsers don't know how to display raw photoshop documents (psd's)
or EPS's. So any images must be converted to one of the above file types.
Our longtime favorite friend Photoshop is one of the most useful tools and the
latest version 5.5 has a new save for web feature which saves the web author several
steps from just a few years ago when images needed to be created then optimized
using other programs to try to minimize file size.
Many other programs such as Illustrator, Freehand, Fireworks or
GraphicConverter(Mac Shareware) can all be used to create images for the web.
There are countless others and many freeware tools also available through download sites.
Browsers
The big ones are of course Netscape and Internet Explorer. It is best
to keep several older versions on hand to test your creations. If you poke
around on Netscapes website long enough you can find outdated versions
available for download. Be aware that many users still use these older browsers.
Also there are many other browsers such as Web TV, Opera etc which also may not support
all of the current HTML 4.0 specification. By testing your pages in several different browsers and on different operating systems you can avoid surprises and know when to avoid certain
code tricks.
Multimedia Tools
Flash,Shockwave,Real Audio and the countless other audio and graphics software
are available in huge numbers.
Be aware that though the players and plugins often come with new browser versions
they didn't always. And plug ins and players need to be updated as more users create with newer versions of the multimedia programs.
There are many new emerging technologies such as SVG ( Scalable Vector Graphics) or Beatnik which all require different creation tools and plug-ins or players.
If you choose to use these- make users aware of it and also
where they might obtain the appropriate plug in or player.
Also ask yourself first whether it is really necessary.
Does a catalog style site really need a Flash interface
or will it turn away more users than it attracts ?
There may be alternative ways to accomplish your task
Perhaps the multimedia portion of the website should be
a secondary option and choice of the user instead of force
feeding it to the viewer. Or perhaps the page might be an
HTML page with smaller Flash elements instead completely
made of Flash. Maybe Dynamic HTML is a better option ?
FTP
Fetch is the tool of choice for Mac users
WS_FTP or CuteFTP are recommended for Windows PC Users
There are many other FTP programs also available through
download sites
Telnet
is not as commonly used as it once was but can be a very useful tool in CGI scripting.
It has an online editor called Pico and allows you to test scripts on the backside of the server so you don't have to upload every time you make a change. However these days many
Server Administrators are hesitant in giving Telnet Access to most individuals
PDF's
can be a great way to make documents available for download.
Acrobat Pro, Illustrator and Quark ( with Distiller) are all common ways to create PDF documents.
To view pdfs it requires the Acrobat reader. Don't forget to include a link to Adobe Acrobats download page for the viewers who don't have it or have an older version.
Site Structure , Folder and File Hierarchy
Setting up your site requires a little bit of planning and a basic understanding
of folder and file hierarchy.
I always recommend planning a website with a flowchart.
Keep these rules in mind - when naming Files and Folders for the web
No Spaces - there should be no spaces in the names of folders and files for the web
No Special Characters or puntuation- there should be no special characters such as a ? or dollar sign
when naming Files. Underscores (_) are okay but most special symbols mean different things to certain
web languages and will cause your pages to probably not display.
Letter Case and spelling matters ! "Page1.html" is not the same page as "page1.html" just as
"image1.jpg" is not the same as "image1.jpeg" - watch for silly mistakes.
Always use the proper extension on your documents or file. The extensions ( .htm, .html, .jpg etc)
tell your Browser the Mime Type of the element so it knows how to display it.
(And don't just rename an image from .eps to .jpg - it needs to be properly converted first)
It is also recommended that you implement some sort of Folder hierarchy to organize your files.
In reality all HTML documents, images and other files could all live in your Root Folder.
However I recommend putting only HTML documents in your root folder and all images, audio, multimedia, pdf's etc in their own folders for organizational purposes.
A website can seem quite unruly when you have to search through 200 file names to find something.
Create a folder called "images" and put your images in it. Create a folder called "sound" and put all audio in it. Create a folder called "flash" and put your flash files in it, etc.
Often times I may have several image folders with some naming scheme to help
me organize such as " buttons", "Juneimages", "Julyupdate" which helps me to remember where certain page elements are stored.
|