Form Page    Table of Contents    Frame Page    Nuestra Tertulia    Animated Vignettes   

Web Design Basics


Pilgrim's Progress

A few years ago, after having taken several evening courses in Microsoft programs, I became interested in designing a website to share with my family and friends at Christmas time.I signed up for " FrontPage" and had a delightful time learning the basics of web document preparation. We had a smattering of HTML, but only to recognize that this was the underlying basis for the markup of text, so that computers could 'talk' to each other on the internet! With a great deal of difficulty, I uploaded our website. (Unfortunately, I had improperly named several of my files and had to keep starting from scratch as each error message came up! I was eager to insert the great photos and collages that I had learned to prepare in Photoshop class,and play the snippets of music that our son Michael had composed. Our website was hosted by our then isp,ATT.We no longer use ATT, so our 2001 website is now blocked--never to be seen again!

computer guy, from clipart to Photoshop to XHTML

Later I enrolled in a Course called "Adobe Go Live", which involves a much more graphic method of developing websites. It's highly technical , and, I think, a much more difficult program to learn--let alone master! I learned how to make animations, both in "Imageready", which is part of the Photoshop program, and in Go Live, itself. I also learned how to make a basic rollover, which allows the person who is viewing the website to see one picture change into another as he rolls the mouse over the base picture.I couldn't wait to see my creations on the great web--(After all they worked just fine when I previewed them on my own browser!) Was I ever mistaken! First, I endured the problem of links that wouldn't work because of erroneously written filenames. (Won't I ever learn!) Then, disappointingly, no matter what I tried, none of my animations or rollovers worked. I even uploaded my stuff onto a new server as well to see if that would do any better.

I found that the vast majority of these servers use a different system, called UNIX and require some special tweaking in Go Live before the rollovers will rollover and the animations animate. I went into the support section of the adobe website and finally had to call the technical wizards in an attempt to learn what to do to toubleshoot the problem. I finally got the animations to run in Internet Explorer but never could them to work in Netscape--even with a Netscape “ fix.”.

All this leads me to the next logical step in the process of my transformation into a computer nut. In FrontPage I was introduced to HTML; in Go Live I viewed the source of the pretty pyrotechnics I was creating, and saw that it was all reduced to a bunch of cryptic words enclosed in tags surrounded by < and > signs. I had absolutely no understanding of that code, and decided to get a better feel for it.



On to XHTML

In the fall 2002 Wake Tech catalog, there was a listing for a class called XHTML. I didn't have the vaguest idea what that was about and how it was the same as or different from plain HTML.Anyway the prerequisites were minimal, so I decided to give it a whirl, and enroll. When I saw the text, I almost quit right there. It was the driest, most confusing gobbledygook I ever saw! Despite my feelings of trepidation I attended the first class. ( After all I only paid $60 for 39 hours of class time. What did I have to lose?) I was simply amazed! The teacher, Sonia, was a really special person who cut through all the extraneous material, and made what could have been a boring, confusing minefield of drivel into a lively, extremely interesting experience.

We created presentations in which we positioned text in a variety of ways:

By using a blockquote tag, one can take some text and place it by itself wherever one wants on the page. I'm using the default center.
Another tag, the "pre"will do the following:
Its use allows the writer to     space    things however he wishes, 
and, what's more change the font to a specific, predefined type.
I must admit I had to introduce a line break tag into the sentence because otherwise the sentences would have run on one line, and you would have to scroll across to see what is written.You can change the color of your text; you can increase the size of what you write; and,like Alice,you can make it very small.You can do all this, and much, much more, with tags.

Getting back to XHTML,this is a new, improved coding system. Apparently, there has been a "browser battle",and the different browsers have used some of their own markups, so that there was no complete unanimity in what is seen by the user. This is an updated form of code which is supposed to unify the web universe. ( I think it is a lot more complicated, however; but won't bore with the details.)

Another thing I learned to do
Tony's garden is insert pictures using code and wrap the text around the image for a symmetric effect.
You may recognize this as one of the pictures I had included on our Buchin family website a couple years ago. It is a shot of my brother's backyard. He worked so hard making it a showcase and I am very proud of him. There is a picture on our main website of the waterwheel and koi pond he constructed. He is so talented! This garden is a masterpiece of electrical work, masonry, and general landscaping design!
Incidentally,I also linked a shot of the stairs he built and the foliage around them to this shot of the flowers. Just click on the picture if you want to see it, and to return to this page close the window by clicking on the "X" at the top of the page.




Beyond XHTML

Following XHTML I realized I couldn't get enough of computer languages. I have since taken SQL, Basic Programming Languages, C++, and finally a course called FlashMX, which is a program that makes animations for the web. It is similar to LiveMotion which is Flash's counterpart made by Adobe. I have made simple animations in both applications. Check my new site.

This is a Flash animated photo album of children of friends and family. To start the program one can press the "Play" button. There are buttons to stop the movement of the animation and buttons which can be used to scroll through text.

In our main website there is an animation I made in LiveMotion to celebrate my brother's koi pond . It's not very artistic, but what I don't possess in graphic talent, I make up for in enthusiasm.

Before I go on to other topics, I'd like you to see some things I learned in my Basic Computer Languages course. One section of the course dealt with Javascript, which in conjunction with XHTML is used to produce stunning effects in websites. I hope you enjoy this work I coded in Javascript. It's called "Electronic Zoo."

My Electronic Zoo and Slideshow

Slideshow

Back       Next

My Programming Class

I have enjoyed my class, "Basic Programming Languages", so much. It was a real treat to be able to take these funny pictures that I have received from friends over time and put them in this slideshow for which I wrote the program in JavaScript. I want to say "thanks" to Douglass Davis, my teacher. I hope he enjoys these "slides" as much as I do. I know I have learned many great new techniques to enhance my websites, and I can't wait to begin the alterations! (You can move forward or backwards in the display by clicking on the links below the picture on the screen.)




Music

You may wonder about the source of the background music. Mike had sent me a sound clip of the band with which he plays. Again, here is a link to the band's website. He was not performing when this was made, but we thank his friend, Doug for supplying this musical treat. Isn't this amazing?! There are even codes to embed audio clips in XHTML documents, and one can specify the number of times the clip is to play! You, the reader, can control the sound by clicking the square on the control panel to turn the music off and clicking on the triangle to turn it back on. Try it!

We'd love to hear from you. You can click on the little pen icon, and reach our email addresses. email


The Tables Turn


One of the most important features of the web page, after content of course, is the layout. Noone enjoys looking at a display that has no form or structure, and that is accomplished to a great degree by the use of tables. Not only can tables be used for the mere presentation of facts, but can be used to showcase and surround pictorial displays. Below is an example of how a simple table nested inside another can frame a photograph--of what else!? a picture of David, Becky, and me in my brother Tony's backyard.

Relaxing in the Garden
Enjoying

the Ambience
and
with Becky

Return to top of page.


Go back to Welcome Page of website.