Standards - Technical


ImageUse software and other tools appropriate to the task.

Project Type: Individual
Class: EDTEC 541 - Educational Web Multimedia Development
Artifacts: Ballroom and Latin Dance Information Resource

 

 

Context

In EDTEC 541 we were tasked with creating an informational/educational web site of a topic of our own choosing. I decided to create a ballroom and latin dance resource site for novice dancers, since I was an avid ballroom dancer, knew a good amount of the subject matter, and wanted to make the project as fun as possible for me to work on! The resource site would contain information on the different styles of ballroom and latin dance, a gallery of dance videos, and local information on where to obtain dance classes and attire. After completing a few modules in the Presence (2009) tutorials, I set out to further expand my skill set to complete this web site.

The Standard Connection

Use software and other tools appropriate to the task.

With my ballroom dance experience under my belt, I could envision just the type of resource web site I would have found useful if I were venturing into the dance world for the first time. The question was HOW would I assemble all the elements I was envisioning, such as dance videos, photos, and a contact form into one professional looking web site? 

When it comes to the technical side of things, I always would rather go the extra mile to learn how to do complex pieces on my own in order to feed my inner techie nerd. For instance, after downloading a base template from freecsstemplates.org, instead of just leaving the design as is I took the time to learn quite a bit about Cascading Style Sheets (CSS), with the help of Sullivan and Rewis (2008), in order to tweak the design just how I wanted.  Also, instead of using a simple video resource such as YouTube to add the dance video elements, I learned quite a bit about how to create flash video files on my own using HandBrake to rip the videos from my dance competition DVD, iMovie to edit them, and Sorenson Squeeze to create an optimized flash file. I felt this would give the site a more professional look, than having a bunch of watermarked videos that were made from another resource. I also envisioned having a professional contact form, instead of merely a contact email address link, and created a working form using a PHP script I learned how to configure to make the form functional on my site. In the end, creating the site from start to finish involved the use of the Adobe Dreamweaver, Adobe Photoshop, iMovie, Sorenson Squeeze, and HandBrake software applications.

Challenges and Opportunities

I ran into quite a few road bumps in trying to incorporate so many complex elements that I wasn’t very familiar with. Creating the flash video files definitely gave me a run for my money at first, as I was not very familiar with the process. Initially I ended up with just blank boxes on my site where the video SHOULD have appeared, which was so frustrating because I felt I had followed the right steps. After a lot of tinkering I eventually realized it was how I imported the files into Dreamweaver that was the problem, since there were several flash media options to choose from, and once I learned that voila! The site was jumping and jiving! Each road bump that came my way I saw as an opportunity to expand the knowledge of my inner techie nerd.

Personal and Professional Growth

I really felt that the technical issues I had with the videos, the contact form, and CSS manipulation only fed my desire to learn MORE about how these elements function within a web site. The technical side of instructional design has definitely appealed to me more than other areas, and that was evident during my experience in getting this media rich site up and running. If anything, I proved to myself during this project that I have the skills needed to delve into the technical side of instructional design and even if I don’t know something, I have the learning capacity to sit with a book or tutorial and end up with a functional product.

References:

Presence. (2009). Retrieved from:
http://edweb.sdsu.edu/courses/edtec541/key1/presence/index.htm

Sullivan, S., & Rewis, G. (2008). Mastering css with dreamweaver cs3. Berkley, CA: New Riders Press.