“Second Courses” Web Design

Web Site capsule summary

There are a few main things involved in having a web site with a custom domain name:

1. (A) Reserving the domain name (so that people can type “www.michaelroam.com” into their web browser).
2. (B) Building web pages for online visitors to see. (Basic pages with text and pictures and links are the main focus of the rest of this site, while fancier pages can have video and e-commerce functions.)
3. (C) Storing those pages ("hosting" them ) on some computer that is always on and ready to show those pages to people who visit your pages.

Step C is called "hosting", and companies that do that will often take care of part A for free but then charge you for part C, which is reasonable because they have to have computers running 24/7 with your web pages available for browsing, and those computers are providing "domain name service"--constantly and automatically advising the wired world "hey, if any web browser asks to see michaelroam.com, send them to our computer and show them Mike's web page called 'index.html' as a starting page."

Short answer? I am using “register.com” to host my “www.michaelroam.com” (and reserve my domain name and provide DNS), while my workplace uses “godaddy.com” to host the “saintannsny.org” website, for sums of at most $120 per year, all included. There are many people who can make web pages for you--it is not much more than word processing plus some graphic design at heart--and I have warnings about things to avoid.

Also, any place that offers to do both parts ‘A’ and ‘C’ (provide a domain name and host your web pages) for free is probably going to want to put ads on the sides of the pages. Some companies also offer to do part 'B' for small fee. (This A,B,C terminology is my own, not some standard lingo.)

 Lessons 6, 7, and 8 were smorgasbord:

• Zen Garden’s separation of form and content.
• The list/outline commands (<ol> & <ul> which contain <li> ... </li> elements).
• More HTML validation (syntax checking) to fix a broken page.
• More fooling around with “ header+footer” div’s (see lesson 4, above, and JuLi Ra Example).
• The <pre> vs. <p> tags, with “pre” telling the browser to respect the spaces and returns within your text (mostly handy for poems, in which line breaks matter).
• Using background images. This div is filled with a thin spiral notebook picture that is vertically repeated using command <div style="background-image: url(images/ring_binder_2.jpg); background-repeat:repeat-y;">.
• Choose a Web Host and buy a domain name (possibly from the same outfit).
• Demonstration of moving files onto a web host (including “zip” compressing a bunch of files together before sending them). Note: when moving a web page, you must move its local style sheet and (folder of) images! (See more information about “FTP” below.)

• Adjusting a style-sheet to change the look of a sample page, which also illustrates the linking of multiple pages (organized, in this case, by days and months and years, with “prev” and “next” links as well). Note: altering your style sheet so that it puts borders around divs and spans is helpful while trying to get
  
  margins, borders, and padding working properly.

• Special Characters (such as & “ — ’ € …é è “ ” ‘ ’ ) and Unicode. Note: codes for Polish letters include &#321; (Ł) and &#380; (ż). (Must start with & ampersand and end with semi-colon.)

• Beware of hiring people to build you a website that you can’t subsequently edit. The people are probably well-intentioned, but you’ll be the one trying to fix the mess. Danger signs: they want to use a program like Dreamweaver or Front Page without style sheets, don’t know what “XHTML” is, or want to put the navigation and text in “Flash” or PDF Acrobat files or “frames.”

  Flash, frames, and pdf's are problematic in several ways:

  • don’t bookmark well,
  • don’t link well,
  • don’t print well,
  • don’t save well,
  • don’t show up well in search engines,
  • can’t easily be edited,
  • can’t easily be read by screen reader programs for the blind,
  • and sometimes have trouble passing syntax validation checks.

  Flash movies don't play on iphone, ipad, and ipod touch so showing a flash movie on your page is a problem if that movie is the only way to see your navigation links.

• Beware large, slow, or confusing pages (especially your initial pages) that discourage visitors. (Don’t make me sit through a movie before I see your page, and see the note about Flash, PDF, and “frames”, above.)
• Using Delicious.com as online bookmark and password saver, available from any computer (so your bookmarks aren’t locked within just one computer) after you install its buttons onto various browsers. (Careful: don’t tell shared machines to remember you.)
• We even briefly looked at the “Alice” program from Carnegie Mellon University (free, available for download onto mac/windows/linux), which lets you build interactive 3D animations which can be saved as web pages.
• Using the free tinyURL to make small links that are easier to email or write down.
• Check out online computation with AI:

Q: How do I know if a tutorial about HTML is out of date?

A: If the tags are in ALL-CAPS or include (yuck) <font> or <color> tags, run away.

Q: I want to build a website for my friend--where do I start?

A: Hmmm, build a site for yourself first, somewhere free if possible, for practice. Does your email or internet service provider offer webspace? You may already have a website from them upon which you can add links, pages, pictures... (.Mac, Verizon, Yahoo, Time-Warner-Roadrunner, and Google all give free webspace to their email customers, and Google and Yahoo are free to begin with.)

Q: I want to set up a commercial site...perhaps with a catalog and a shopping cart?

A: The “choose a host” summary might help. One person in a previous class is using nexternal, which has competitors including ebay’s proStores and goEcart...

Q: How do I put songs and videos onto my website?

A: I’m told that “Video can be uploaded and embedded very easily with a Google account, in YouTube, and Vimeo (which is really high quality). SpinXpress works really well for audio. All are FREE.” Also, try a web search for “embed” and “object” tags. Be prepared for incompatibilities between different browsers. Whatever you do, don’t have your web page automatically play music, or video with music (silent video is okay)... your visitors might be listening to something else already, or might be using a laptop in a libary (or business meeting). Also, better not use somebody else’s copyrighted material. (And be aware that anything you put onto the web can be saved/kept/forwarded by anybody else on the internet, so don’t publish your favorite email address unless you love junk email.)

Q: How do I know my page will look alright on all browsers?

A: Unfortunately, you don’t. If you follow the basics and validate the page, the odds are with you, but you’ll still want to test it on at least firefox and internet explorer, especially because IE doesn’t do real well at recognizing some style commands.