Senior Project Update 3

Since I am in web design class I decided after learning some basic java to put a little more focus into jQuery so that I can use it in my websites.

 Having your code hosted from a server like google makes an overall much faster loading time for your jQuery contrary to you hosting it yourself.

This is what most jQuery code will start with. The .ready will wait until the page is done loading so that the code doesn't start prior.

Another thing jQuery can do in animate things. With this code above when the button is clicked the div's dimensions and positions are changed as well as its opacity.

This is someone else's code they use to create a smooth scrolling effect on websites. This is something that I can really learn from because have single page scrolling sites with smooth scrolling in my opinion the best way to have them. Using jQuery to do this is far easier than trying to do it with CSS and HTML alone.

Senior Project Update 2

 The most recent thing I have been learning is jQuery. This is essentially javascript but is formatted a bit different to simplify the coding to make it more compact and simple when scripting HTML.

1

You can either insert the code directly into the html document or you can have it link to a javascript page by using the <script> tags like the main.js file in my first image. In order to most effectively use jQuery you need to link it to a library (first line of code in image 1). This is very important in using jQuery because this holds all the pre-written functions that jQuery can use.

2

If your document was not linked to a library you would need to write out code like it is in image 2. Typing the entirety of document.getElementsByClassName every time you were referencing a class in your document would consume a large amount of time. With the library connecting the document.getElementsByClassName can be instead used with a $.

3

                                                                                                                                                                    There are many effects that jQuery can add that you cannot do as easily with only CSS. Things like .hide and .fadeIn (Image 4) are pretty self explanatory. The .hide will cause the element to be hidden and .fadeIn causes it to slowly fade in. This is all done do to the function that executes when the page is first loaded (function main). Another function in image 4 is the one that is paired with .on('click') so that the function activates when the element is clicked. .slideToggle eases what is appearing into view so that it is not instant. .toggleClass will toggle a CSS class on or off. .text changes the current text to new text.

4

Senior Project Update 1

The thing I decided I wanted to learn was Javascript. I do not know much about it and I am going to be majoring in computer science so this will also be a good start for me for next year. So far I have been following tutorials on codeacademy.com. It has taught me some ver basic java skills. I now know about things like variables, creating random numbers,

Setting a variable

Creating a random number

Function

strings, functions, arrays, and how I can implement them all together. I have also learned about doing things like asking a question and returning it as true or false to make complicated

This variable has multiple strings in it and it is setup like an array

Portfolio Final Post

My idea for my portfolio was to have a single scrolling page that focused on showing my work and telling everyone about myself and my skills. The links in the menu will take you to the different parts of the website and the menu is fixed so that the menu can be accessed from anywhere. The first thing I wanted people to see was information about myself so that they could see who I am. I then wanted to create a portfolio section that had my recent work in images that when you hovered over them would bring up a link to the site and give a little bit of information on the site. The thing I wanted to end with was contact information. If I used social media I would link those in the contact but my email, phone, and blogger are the only ones I have currently. Coming up with the idea was not too hard because I wanted a single scrolling page anyways and looking at the different portfolio websites gave me ideas for content in my portfolio.

My page is not finished because I spent a day working on my english final and others days working on late chemistry homework. I got the single page scrolling and the hover on the images going. I did not get much of my content in and the nav bar is still a bit wonky. I will probably continue working on this outside of class after break.

TV25

When we started this project I really had no idea that there were still antenna stations that were still looking to get new advertisements. I thought that the ones that still exist were just going to die off. The website our client made themselves was very lack luster. There was not much to work off of design wise and the logo probably needed to be redone. I started off by creating some variants of a new logo but tried to make it keep the similar look of our clients original logo since he seemed to be leaning towards that. I did not decide on any colors for the logo. He said that he wanted a slideshow type thing in his website so I mainly focused around that aspect in my mock - up site with the content being underneath. On the first site I made I focused on trying to make the slideshow the focus of the page. When I was working on this page the way I laid out the slideshow and the menu did not leave enough space for me to incorporate the logo without it looking cluttered. In the second site it is a similar design but the menu scrolls with you on the page allowing to to see the logo and simply scroll to the slideshow/content. Color is something that I am not great with so the site has a plain black/white/grey color scheme. 

Logo

Mock up

Site 1

Site 2

Mock-ups

Yara Yarn Colors

Here are some color variations of the logo. THEY DO NOT ALL HAVE A YARN BALL AVAILABLE. My favorite 2 so far is the blue one and the red one. I still do not know if I want to keep with 1 similar color or if I want to add in more colors since yarn comes in many colors.