#tech project

So what’s been happening on this silly tech project I talked about a couple weeks ago? I’m glad you asked, because I have the completed audio with vocals to share with you!  Here’s an update on what’s happened. As you can tell, I recorded the vocals myself on the track. I tried my best to seperate the vocal line from the original recording of I Can’t Go For That by Hall & Oates, but quickly realised it would be nearly impossible. I followed tutorials made on youtube, such as the one I’ve attached below, on how to use Logic Pro X and phase inversion on a stereo track to remove the instrumental and create a clean acapella track, but the way the song is mixed meant that the lead vocal line was placed in the middle of the mix, rather than a mono track on the left or right. 

I fussed with it for a bit before coming to the conclusion that recording the vocals myself would be just as fun and would ultimately make the music video (still in creation) more interesting. While I didn’t get to do this trick with this particular song, I still learnt a lot about mixing and how to seperate instrumental and vocal tracks for more modern songs that allow this technique to work!

Speaking of instrumental track, how about those keyboard and guitar sounds huh? Last blog post about this tech project I mentioned possibly using an audio sample of the oats hitting the side of the bowl to create a keyboard and guitar sound, and that’s what I ended up doing! For the keyboard, I added reverb, compression, EQ, chorus, and pitch correction to come up with a standard keyboard/synth sound. I then sampled this to my midi keyboard and created multiple tracks for the multiple different synth parts. 

Tech Unit 2 Project : Information About BSGE

The project is to create an informational website for prospective students coming to the Baccalaureate School of Global Education. This project tests our skills to create a website with multiple webpages using html and css from what we have learned in technology class. The requirements of the project include that the website must contain a homepage and at least four other pages. The homepage must…

the website must have a homepage and at least four other pages,

the website must contain a navigation bar on all pages,

the website must have pictures of the school,

the website must have 90% or more of its styles specified in a single external style sheet,

the website must be completed by Friday, November 4, and

any pictures used must have permission or be via Creative Commons.

Those were just 6 out of the 17 requirements that we had to meet. The other 11 just stated what we should and should not include as the content of our websites.

My project in particular can be found at: http://tech.bsge.org/students/21robz/unit2project/home.html

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Now let me explain the process I took to make my whole website. First I designed the basic layout of the pages, then I planned when things would get done. I researched on all of the content that I didn’t know much about, and finally uploaded them and checked their functionality.

That above is my project design. It was mainly meant for the home page of my website. The home page is the main web page that you will see when you try and connect to my project. It acts as a hub to all the pages that I’ve made for this project. However, the only difference is that only my home page has that image of the school, while my other pages of the site don’t.

After I made that design, it never really changed as I thought it represented BSGE, the best. The colors all (for me) are best connected to BSGE as BSGE follows the IB program (which the main color is blue) and has teams called the Stings (which are primarily yellow as the mascot is hornet). I just used different shades blue and yellow to come up with my design. I also really wanted the design just to be short and simple so it doesn’t scare off any viewers.

Now onto my project plan. It was very simple and just allowed to set due dates for myself and hasn’t very much changed through the coarse of this project. It was a go to plan where each night I had to accomplish something new. For awhile, I was a little behind schedule, but still accomplished what was set for each night.

Some parts of my plan include:

Take pictures of and search up images relating to the school and if they’re not on creative commons, I could try and get permission. (Friday 10/28)

Create a navigation bar that links my main home page to my other pages of information and links to other pages where people could out more info that I can’t really explain as well. (Saturday 10/29)

Test if those links and images work. (Sunday 10/30)

Get the information and content I will put into my pages. I will type them up in docs first and revise them. (Monday 10/31)

The plan worked and helped me keep track of what has to be done. All in all, my plan was great for me and did well to keep me with time. In fact, I would say it would be what allowed me to submit my website on time.

I’d say with the html (which stands for Hypertext Markup Language) coding, the biggest part has to be my navigation bar which links all my pages together.

<nav> <ul>         <li><a href=”home.html” target=”_blank“> Home </a></li>        <li><a href=”contactproject.html” target=”_blank“> Contact </a></li>        <li><a href=”ibproject.html” target=”_blank“> IB Program </a></li>        <li><a href=”usualdayproject.html” target=”_blank“> Usual Day </a></li>        <li><a href=”studentsproject.html” target=”_blank“> Students </a></li>        <li><a href=”afterschoolproject.html” target=”_blank“> After School </a></li>        <li><a href=”bibliographyproject.html” target=”_blank“> Bibliography </a></li> </ul>  </nav>

Instead of creating a regular list with <ul> and <li> tags, I had to use <nav> tags (which stand for navigation) in order for my styles for the bar to work. These styles were put into css (which stand for Cascading Style Sheet) coding and put into another file called an “external style sheet”. This is basically a file that has style codes and is connected with html files that make up a webpage.

nav {    clear: left;    margin: 0;    padding: .5em;    background-color:#f1ff99; font-family:’Comic Sans MS’,Sans-Serif;    } nav ul {    list-style-type: none; padding: 0; } nav ul li { clear: left; border-right:1px solid #bbb; display: inline; padding:10px; } nav li:last-child { border-right: none; } nav ul a {    text-decoration: none;    } nav ul a:link, nav ul a:visited {    color:black;    } nav ul a:hover {    color:#6dd3ff;    font-weight: bold;    }

Coding like this allows for my navigation bar looks as good as it does on my site. All that code is based around styles only so that my html web pages look appealing to the eye of anyone that sees it.

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

I did my best with this project/website. It most likely isn’t the best of all website ever made, but for my amateur ways, it seems good enough.

Dictionary bookmark is basically a small piece of technology which is used as both;

1) a dictionary

2) a bookmark

1. What was the name of the theme that you chose to start with?

     I started with the theme Minimal.

2. and 3. What specific things did you change in the style of this theme? Why did you make the choices you made as you styled this blog? Please be as specific as possible.

     To start, I changed the background color to Aqua, which made the color scheme much brighter and more colorful. I then changed the color of the title of my blog, "Corsewalk", to Blue, establishing Aqua and Blue as the dominant colors of my color scheme. I also changed the font of the title to Brush Script MT because it seemed more fun than the original font. It also stands out compared to the font I used on the rest of the page, Britannic Bold. I changed the hover-active color of the title to DeepPink, bringing in DeepPink as another fun and bright color in my color scheme. I changed the border at the top to yellow and enlarged it to 10 pixels to make the top of the page more colorful. I changed the border at the bottom of the page to indigo and enlarged it to add an unexpected color at the bottom of the page. I changed many of the smaller border lines to yellow, DeepPink, and Blue to keep the page colorful. I changed the circle decoration at the bottom border of the page to DeepPink to keep pink continually appearing in my color scheme. I put the circles, which are colored DeepPink beside the "menu options" (Home, Archive, Mobile, and RSS) to add more decoration to the page. I also changed the text-decoration of the "menu options" at the top and the little yellow section headers on the right side to blink because it is fun and the words are small enough that it is not too distracting to have them continually blinking. I changed the color of the search box to DeepPink and its border to yellow, making the page even more colorful. I also changed the font in the search box to Britannic Bold and enlarged it to match the font on the rest of the page. I changed the color of the borders under the post titles to Indigo to match the border at the bottom. I changed the color of the post titles to Blue to match my page title.

4. Do you feel like this assignment helped you to better understand HTML and CSS coding? How could you use these skills outside of this class? What are you most proud of accomplishing in this project?