HOA Recap

This video is a recap of the Olathe Northwest High School Marching Band winning overall Grand Champion at the 2016 Heart of America Marching Festival at The University of Kansas. This is now the 2nd time Olathe Northwest has won a marching festival with the first one coming last year at the 2015 Neewollah Marching Festival.

ONW Band Story/Mr. Davis Award/Personal Project Review

Scope

This is a story on the 2016 Raven Pride Marching Band and their field show Turandot as well as an award won by the director of the ONW Band for their fantastic performance.

Process

The process started with Mr. Davis winning an award for Outstanding Young Band Director of the Northeast District of Kansas and I decided to do a story about the band and what it takes to be in the marching band. I wanted to do a story on just Mr. Davis but I thought why not do a mid-season story on the band and their season. When I started to prepare to do this story I couldn't film the footage because I am in the marching band, so somebody else was willing to film for me and I was very appreciative of that. When I came to edit, I was stuck because writing the voice-overs was very hard to do especially when I didn't know how to start it. When it came down to critiquing my video I didn't realize my audio level was not even, so I had to go back and fix later.

What I learned/What can I do better

What I learned was to make sure audio is consistently level and even as well as be more articulate on my voice overs and make sure to be careful of editing the background music. What I would do differently is make sure I am framing the interviewee more in the frame and make his shoulders are both in the shot. Maybe getting interviews with students. I was very proud of my sequencing and timing as I thought that went very well. 

Experience/Conclusion

This was a good experience for me because I learned what it was really like to do a news story mostly by myself and I know what to expect for next time and plan on what I am going to do before hand as well as being more flexible if something doesn't go my way. I hope to get better each and every day and keep moving forward.

Photo Composition Responsive Site

Scope:

This is a responsive web site about Photo Composition that I have been working on. The purpose of a responsive website is so you can view it on any device at anytime. A responsive website is able to adjust the CSS to fit in the browser. The overall idea of this is to make things a lot easier to view instead of just on a PC.

Process:

As a started making my Photo Composition site, I had to figure out what rules I wanted to show. Over spring break I took different photos for 12 different rules. Below are some of the pictures I took....

Making the site was going very smooth; until my banner didn't want to go in its place. I spent a long time trying to figure out why it would it not stay in the header div. I finally figured out that I had extra spacing in the div and that's what was making it expand to the wrap div. Once, I finished the regular Photo Composition site, it was time to make a responsive version. For this all I needed to do was add media styles for a tablet, and mobile device. Overall adding them wasn't too difficult, but I had to make sure that I could tell them apart.

What I learned:

What I learned along the way is that you REALLY need check your code quite often because any extra space in the CSS will throw the whole thing off.

What I would do differently/same:

What I would do differently next time is make sure my code isn't very confusing because it took me a while to figure out what was making my website very funky. What I would do the same is keep working hard on detail because I pay attention the most to detail and perfection.

Conclusion:

Overall, this was a good way to get an experience with a responsive website, because almost all website have to have responsive websites or their company is in trouble. Getting the hands-on experience will help me later if someone needs help trying to get their website to view on their phone, and I will know exactly what to do. This was a really stressing, but fun project to work on and now I get a glimpse of what real web designers do.

Responsive Web Design Intro

This is an introduction of Responsive Web Design. Below are some answers to what Responsive Web Design is really about and how it works.

FAQ's

• What is responsive web design?

Responsive Web Design is being able to resize or create a viewing of your website by making your layout, code, images and content of your web page easy to read and make it flexible so that any device can view it.

• Why has responsive web design become so important?

This has become very important for any website because it just makes it easier for companies to make one whole website as a responsive rather than making two separate websites, one for desktop, and one for mobile.

• What are media queries?

A media query is a CSS3 module which allows the content of a website to adapt to different conditions on different devices (i.e. PC vs Tablet vs Mobile Phone).

• What are breakpoints?

Breakpoints are intentionally stopping or pausing a program. They mostly used for debugging purposes to make sure the system is functioning. 

Example Site

Below is an example of a responsive website with 3 different screen captures from a desktop view, tablet view, and mobile phone view. All from the home page.

Name: 3200 Tigres

website URL: http://3200tigres.wwf.fr



First the desktop view, it has the regular links of the different pages up at the top with the image sizes being more on the larger side. It also has the very wide layout a side bar and the content stretches very long. Also the text is smaller. Overall, it's like what you mostly see in a website.

Now if we look from a tablet view you notice that there are a few differences.  The links to the different pages are now in a bar going vertically instead of going horizontally. Also you can you tell that there is no sidebar on the right side anymore? It shifted down the page and the new sidebar is the links on the left. The image sizes also got larger and the text got larger as well, and the content length got shorter. The layout of this is much more narrower but still is very organized.












Finally, the mobile phone view. This view makes most sites all scrunched up and very disorganized, but that's not the case for all mobile sites.  If you noticed, the image of the tiger is gone and the page is mostly made up of the links to the different pages and the content is once again much larger. The page is also more narrower than before, that's because as the screen becomes more narrower the images and links all are moved because then they won't fit in the screen at all if it stays in the same place. 



Overall, responsive websites are important for any device especially because not everyone has the desktop computer on them at all times, so they must be able to view it on a tablet or mobile phone. 

Music Video

This was a music video that our group made. I don't own anything. All copyrights are to Eminem and the Album. Curtain Call: The Hits

Past, Present, and Future Website

Past Present Future 

I made a website in Dreamweaver about the things I have done in the past, the present, and will do in the future. In this website I used rollover images with different types of layer effects with a background and a 3D effect for content. 

Below are the pages of the site they all used different types of divs. The part with the rollover images were in the div called top and the content all went into a div of inner bottom and into another div called bottom. All the content went to the black screen that I created in Photoshop using different layer effects like drop shadow. They also used scroll bars to get all the content which only used pretty much in the past page because there was a lot of content.

Process

Starting the website wasn't easy at all. First I had to make a background and the black screen with the different pieces of the rollovers and that took a while to get it just right but I had to add a whole bunch of different layers and layer effects with the bevel and emboss and each one had its own layer so I made about 8 layers because I also had to copy the finished one. When setting up the website I used the div called wrap and that kept everything in that certain div. The one problem was I was trying to make the top div but it kept sending it to the bottom so I had to call that bottom and re-create the top div. Making all the divs were probably the hardest part

Challenges and What I learned

Some challenges I had were just starting the website and also placing all the rollover images in with their effects,  but I found out that it seemed to not like the scripts weren't working correctly but also getting the effects to work were a pain and I had to start over in putting them in because the functions were all messed up. I also learned how to put in scroll bars and they aren't hard, it just takes a while but overall this was very stressful but I made it to a success.

Tornado Alley Website

Tornado Alley Website

Scope

This was a website I made about Tornado Alley and what the causes are. I mainly made this website because I was interested in this topic and wanted to share how it can affect those who live in the area and to know when you can expect a tornado. 

Process

First I had to come up with a topic that I was interested in to talk about in my website. To start out I couldn't think of anything but I eventually thought of weather and I knew I liked watching Tornado Chasing on the Weather Channel so that's what I decided to do my topic on. This wasn't very easy to make at all. I basically started from scratch and filling in the code of Dreamweaver with a basic two column layout which was probably the easiest part but adding all the content and divs were very complicated if you didn't do it right. I didn't mess up so bad but it was hard to make the links to the other pages and that got very funky at times. Towards the end my links weren't all working so i had to go back and make sure every page was correct, so I did the same thing 25 times. 

What I Learned Along The Way

What I learned along the way was how to make the divs become more of the website by using them for my whole website and knowing exactly what to put for CSS Styles to make it look good. I also learned that you have to plan out what you need to do each day to get your project in on time and not fall behind or then you'll rush to just get it done and not spend time on making it look amazing.

What I Would Do The Same/Different

What I would do the same is working on content out of school or anything I can in case I fall behind. What I would do differently is to know more of what I can do on my own time so then I don't have to ask for help and learn and get better.

Conclusions

This project was fun and it will help me draw experiences in case someone needs a website on their topic or trying to advertise their product and I hope to keep getting better. Click the link below to visit my website and all the other projects I have done.

http://eravensonline.net/students/506rma20/final%20semester%201%20project/tornadohome.html