Project 3: Identity

      After having my websites so similar for so long, I decided to change it this time. It was good, but I want to make something better. I also want to improve my creativity and productivity since I've always been copying and pasting the theme to all my web pages. I even forgot how to code some of the basic HTMLs. But this time, I am doing everything from scratch! I also learned to use some jQuery recently, so I wanted to incorporate some of that to improve the website as well. This is a website about identity. When I thought about identity, I could not think of anything besides myself. Therefore, I've came to a conclusion that, I am my own identity, not my age, looks, grades, status in society because all of these things change over time. So I have created the whole website around this idea. At the same time, I was brainstorming for this website, I was reading a book called Sophie's World by Jostein Gaarder. A book about the history of philosophy. I was just so on to the Chapter about Hume during this time. And it had two amazing quotes that really supported my idea of what identity is. So I have included these two quotes into my website, which is in the My Thoughts page.

      So the first thing I did before anything was to design a logo. I sketched a few in a paper. I chose the one I wanted to use and tried to digitalize it using Photoshop CS6 which I've not used so frequently lately. But before I can draw out the logo on Photoshop, I had to choose a theme color for my website that the logo will also have. I really didn't want to spend too much time choosing colors, so I went Googled "color schemes" and found websites that randomly creates complementary colors for you, which is amazing. I used this website call Coolors.co and the loved the first randomized color schemes and decided to use it. I used these colors to create a logo. It's a huge block with a question mark created by blocks each with a letter inside, that spells out "identity" together. I really liked it, but I just wish I chose a different font because it doesn't fully match my website. Then it was the biggest step of this project for me, and that is the design of the web pages, more specifically where should I place my logo and navigation bar. I spent almost 80% of the time of this project working on just on the navigation bar. At first, I wanted it to be all the way on the top with the logo within the navigation, but I kept messing it up, and it wasn't coming out in the way I wanted. I usually get bored to hell in my English class, because the teacher always just never stop talking of not so important things...so I decided to do something actually useful with my time and I started to draw layouts of my website on a piece of paper. It actually turned out quite well. I created a few very nice designs of how the header, footer, and navigation bar would look like and where the placement should be. I also created layouts of how each page will look like. Then I just chose the best one from there.

      I wanted to have a header with a fixed image background and a navigation bar on the bottom of the header that will take more than half the page. I want to make my website very visual, so I chose some of the amazing images that I had to put into the website after editing it to make a blue-ish color to fit the theme of this website. It took so long for my to finally have the header exactly the way I wanted, I had to mess around with the relative, absolute, and fixed position for so long. I was also struggling to make a nice and simple footer that gets the job down, but I simply created a new one to fix the issues I had. 

      After I finally I got the header and the footer done, I just finished the homepage with an introduction, and those circle image links that I used on the previous project, on the PRO: Pet Supplies Store website, because I really liked it. It sort of originated from my first ever Digital Design project, the website about my "Top 3 Favorite Movies," which is my all-time proudest project in this web design academy, because I create something new, unique, it looks so good, I was so ahead of everyone to have a navigation bar with hovering buttons and it was only my first project... I guess this will be a legacy of mine after I leave...(sad). But this website about Identity is also one of my proudest and best projects that I've ever created. It's been a long time since I've put so much effort into a lab or a project, to be honest. And I really like the way it came out. Also, at the most of the times, I focus solely on the design aspects of the websites that I create. But this time, I not only spend so much time and effort in the design, I actually focused a lot on the content, the things I was writing about too, so I highly suggest everyone to read all of the things I wrote on my website. I then added a fade in effect to the website using jQuery. I made it that the header will show then few elements will also fade in after each other. I also learned a new jQuery method that allowed me to fade in the elements only when the user in scrolling down to the website. So everything will look like it's fading in which I did to all the web pages. And on the "My Identity" page and the "Nature vs. Nurture" page, I made the content to fade in only after the user clicks on the website. Hoping to make my website different and interactive.

Also, each of the web pages is a bit different in terms of their structure, but my favorite is absolutely the "My Thoughts" page. It not only looks the best than the other two. It just has so much content to it. Almost everything I wanted to talk about the most is written in there, that is also why it is so long...but the long paragraphs actually makes the website look more fuller and better. 

It was a lot of work but it was really fun. I just hated when a certain student just come by every now and then and say "why are you working so hard" in a way trying to mock me.

Wow, what a such long blog. I've never written so much on a blog, but this is such a huge project for me that there are just so much to talk and write about. If you have read this far, thank you so much! It really means a lot to me. But I don't think anyone would read through all of these anyways...(sad)

Link to this Identity website:
http://techteach.us/WCP2016/HJiahua/Projects/project3/PJ3_mt.html

Lab 14: JQuery Stop()

      After we do a certain lab in class, we would always have a follow up lab that adds to the previous lab. And this is one of those labs for Lab 13: JQuery Animation. This time, instead of creating animations, we are stopping these animations, using the JQuery Stop() Method. This JQuery is so easy to use...that's what I thought when I didn't struggle at first. All we have to do is to copy and paste the previous lab into a separate document, and name it lab 14, then add the stop method to it. We need to demonstrate the normal stop, which stops only the current animation that is playing, another that freezes the animation at the point that it is in, and one the stops the animation that goes to the end of the animation. 

      The first one was easy, just one function with the stop method added to the box. But I've noticed that it's hardly noticeble because I have so many short animations put into one, stoping one of the short animations doesn't making much of a different, so I moved on to the other two stop methods. I was so stupid that I was literally putting the words "stopAll" and "goToEnd" into the stop() method because I not only forgot that they are suppose to be Boolean values, I didn't read the webpage on w3schools carefully. I was wondering what was wrong. But I realized how stupid I was when I saw a classmate's lab... I really don't know what else to say. There isn't much to say about this project. I basically just added three buttons with 3 extra stop functions to the previous webpage.

Lab 13: JQuery Animation

      This is lab 13 of the year. Another JQuery lab. But this time is special. It is animating. We can literally use these codes to make animations within a website without using any video editing tools. How cool is that? But that will take so so many codes to achieve, though it is achievable. At first, we were shown how to this JQuery .animation() method would work. We can move an object around, change it's color, opacity, position, turn it into different all shapes and and sizes, and even make it crazy. We are basically manipulating the CSS with JQuery. And that was the goal of this lab: to demostrast each of these animations with 4-5 boxes created by a <div> with CSS.

       I didn't want to create so many boxes, so I just made one and created all the animations to animate that one orange box that I've created. For some reason, I don't have much to write or say today. Everything is so short. Well, hope I have more to say while I am writing the blog for the Identity website, which I put so much effort in. So I created 5 button linked to 5 different functions with JQuery that demosrate each of these five animations. There is move, change opacity, change into a circle, change size, and make it crazy, which is a combination of all that took a long time to make. I had to combine all the codes and created a very big block of code for just one short animation that last a few seconds. The reason is that for something to be crazy, it has to fast, so no matter how much animations I add to it, it doesn't make much different to the overall time of the flash of animation. I don't think any of the students that saw this knew how many codes were involved to it. When Ms. Ramirez showed it to the class, she said "That's crazy?"... I had nothing to say... Anyways, I also tried to make the box actually animation and not just one animation that changed, so that means that I would have quite a huge amount of codes for each function.

http://techteach.us/WCP2016/HJiahua/Labs/lab13/LB13_Jiahua.html