Identity Project Reflection Journal

           For this identity project I first had to wonder about what identity means to me. That was when I noticed that there were so many different ways people can identify themselves based on: their gender, occupation, personality, or on their background, etc. Everyone mostly in the class was doing their website based on themselves but I wanted to be different, I wanted to create an identity website that everyone/anyone can relate to. I thought that why would someone visit my page, why would they want to know about my identity (they don't even know me or really care) so I tried to attract the viewer with something that they can connect with. I tried to work on my visuals because I know that I am lacking in that aspect so I attempted it by creating the fingerprint and identity image by myself. Every person has their own unique fingerprint so that could add on to their unique identity because not everybody is the same. I put a plain black solid background color because I wanted the website to be simple and to emphasize the content mostly, and black and white are good contrasting colors.

       The animation on the homepage tells us that your identity isn't really based on your appearance but whatever you want to be known as. I used jquery for the animation having it hidden and also fade in. On the background info/Religion page, I put all the continents and when you click on the image of a continent you get an alert box telling you about the culture there and and religion. Also when you hover over the continent name, the image slides down, kind of tried to use the accordion effect there for a previous lab I did. On the personality traits/qualities page, I did some research and found the big 5 personality traits and it seemed interesting so I used it as content by dividing each section up with the use of a table and putting images for visual learners. I also put a link where you can take a test and find out which one you can identify with if you aren't sure about it. Then on my sources page, I put down the copyright of all the images and content that I found online. 

Lab 14 Stop Method Reflection Journal

           In this lab, I had to use my previous lab 13 and include a feature. I had to create a stop button that stops the animation and another one that stopped all of the animations and finished it to the end. I did this using the jquery stop() method. Unlike my previous lab, I created another column to put a button to stop each animation specifically for that animation. Then I put a stop all and finish button at the top because it would be easier to stop it if it was in the top and you could notice the difference. It was a bit hard doing this lab because it was a bit frustrating since the page wasn't fully loaded yet so I had to double click the button for it to work instead of clicking it just once and I had to be really fast too. Otherwise this lab was kind of easy since I just had to use the syntax shown below. These skills will help me in the future if I want to show the process of an animation, this could be included if the person that visits my page wants to skip the animation to the end.

The basic syntax is:

$(selector).stop(stopAll, goToEnd);

Lab 13 jQuery Animate() Method Reflection Journal

      For this lab, I had to create four division with different animations demonstrated using the .animate() method. First I created an html document with my overall css and then I made a table with 2 columns and 6 rows for organization. For the first animation, I changed the opacity so it would look faded and clear. I changed the width and for another one I changed the height of the division. Then I changed the position making it go to the left and come back to its original place. Then the last division had all of those effects above all in one division tag. I made only one button so when you click on the button it plays the function that contains the jquery code and all of them do the actions at the same time.

This is a sample of the jquery involved:

$("button").click(function() { 

var div = $("div");

div.animate({height:"300px", opacity: "0.4"}, "slow"); });