Introduction
Hello everyone. As I am writing this, I am stuck in a classroom, done with testing, and board out of MY MIND!!! So, I decided to write this blog post on the making of the website that WAS supposed to go with my history video, but that video has been delayed until I have time to work on it. Anyways, this website was my final project for my 2nd semester CTE class for Web Design and Development and it was entirely coded in HTML with Bootstrap. So, without further to do, let’s talk about the development process…
Part 1: Home Page and Info for History Pages
Let’s start with the home page, since it was the easiest to develop. All I had to do was create a jumbotron (easy enough…) with the title of the site (I chose “Hatsune Miku & VOCALOID: The History Behind the Diva), the video embed, and then a navigation bar for people to move to the different parts of the site. Unfortunately for me, the menu bar was one of the hardest parts of the site, all because I forgot to include code for jQuery to load… oops. So, after that was fixed, the menu bar was complete, and it was able to be condensed into a hamburger menu for smaller screens/mobile devices. Also, I want to quickly mention where I am getting the information for this, since it is a history site after all.
The info for the site comes from my research that I did in February of this year for a research project on, you guessed it, Hatsune Miku and VOCALOID!! This was one of my favorite projects to work on, and I got a full 100% on it. So, when working on the project, I pulled from two video sources, one research paper, and one student news article (all are linked on the site). Anyways, with that info sorted, let’s talk about the design of the history pages…
Part 2: The History Pages (Pre-Miku and Post-Miku)
These pages are where the history portion of this site lives. Pre-Miku encompasses the history from 1961, along with 2000-2007, while Post-Miku encompasses 2007-present. The design wasn’t that difficult, since I just laid out the information in an easy-to-understand manner, with pictures and videos sprinkled here or there. I showed a video of the IBM 7094 singing the song “Daisy Bell,” I showed some of my favorite/most influential songs on the Post-Miku page, and much much more! Trust me, it was fun to design, and it is REALLY fun to play around with the site and read the history behind one of (if not the most) influencial virtual singers/voice synthesizers to ever exist!! Anyways, there are more pages to go, so let’s talk about the impact!
Part 3: Impact Page
Pretty much the same type of deal as the last two. Info with video and images sprinkled in between. But, that’s not all.
Part 4: The Script and the About the Author Page
I decided later on to implement the original script into the website, and I think that was the easiest page on the whole site. All I did was use a Word to HTML converter, put in a few Bootstrap elements, and I was done! Easy stuff. But, the about the author page was a completely different story. The about the author portion was easy, but our teacher wanted us to implement a contact form into it. So, I thought “I will just use NodeJS… it can’t be that bad??”
WHY DID I SAY THAT?!?!?!?
I was dumb… Node just didn’t want to work, and my guess is that it was trying to run on port 3000, while my site was on 443 for SSL access to the internet. So, I just gave up on Node after an hour or two of messing with it, and I went straight to a company with an API that I could just implement onto my site, and my teacher was cool with that. So, that marks the end of development of the site.
Conclusion
It was a tough road to get here, but I did end up with a really good-looking site. I am very proud of myself for doing this in only a couple of weeks, and I hope you guys enjoy reading what’s on there. So, with that, thanks for reading, and as always…
Leave a Reply