SNOWBOARD TIME (HTML 1.0 Assignment)

Hi everyone, for the adventurer people that have asked me about snowboarding, finally I find the opportunity to publish something on the web, check it out --> lamp.cse.fau.edu/~rgiusti/MP1


Cutting-edge Web Technologies – Fall 2009
Mini-Project 1 – A basic Web 1.0 site using XHTML and CSS
Rafael Giusti

The site I chose to build for this assignment has the purpose to share my experience gained in one of my favorites activities, snowboarding. The information posted is intended to help people who are planning to take this fabulous adventure. This webpage idea came to me since many friends have asked me for that information, so I took this opportunity to publish it. From now on, I will refer to the webpage when they ask me.

The site consists on 4 .html files interconnected showing text information, some pictures and links to videos. I chose a design with light gray, blue and white colors, a background made of snowballs figures, and a header containing a picture of me in the snow mountain. I chose a standard menu that came with the original two columns css I picked up. At the end, my final .css was made from the mixture of two css. I had lot of text to show in the web page, that I wrote in the first step of my assignment, so I decided to split it. Some pages shows a list of sections where each item will expand to show text details when clicked, using Javascript. I also decided to put some videos I had previously loaded at Youtube to save more text to show.

I started working with Amaya, but didn’t work well on my mac laptop, so I used Aptana studio that works well. It has a nice interface with colors, embedded browser to see the current view of the webpage, and text predictor that helped me a lot when writing the code for html, css and javascript. It also has available a debugging interface, yet I tried to use it and couldn’t make it works.

The task that took me more time was editing the css. I learned that it is very important to chose one design that has to be exactly as you have in mind. My problem was that I couldn’t find it, so I decided to put my hands on the closest one. For example, I modified the header to put my own picture, replaced the background from another css, and transformed from two columns to one the design for one of the pages. All this took me a lot of time, mostly because of my inexperience with css. I think for next time I could make some css modifications faster. Another task that was time-consuming was the html validation. I spent lot of time fixing bad practices I was doing in my code. Hopefully, the validator comes with details about the errors, so I learned what the reasons of my code errors were.

An important thing to mention is that I was counting to put some embedded videos from Youtube (they give an option to copy an paste the code in any html file), but in the final step of my design the HTML 1.0 Strict validation didn’t pass because embedded objects are only available in HTML 5.0. I needed to keep these videos in my design so I tried using Javascript to add the embedded object code and it worked. This way I didn’t worry about memory usage in the server because of the videos, while at the same time my code met the HTML 1.0 strict validation required by the assignment.