WBL Workshop #6: Be Moneywise Reflection Journal

              In this work based learning workshop, Mr. Franck was a guest speaker and he spoke about important tips for our future success. First he spoke about the research he did on what teens and people in their twenties worry about. Teens usually worried about fitting in and people in their twenties focused on their career and skills. It shows how our minds tend to progress as we get older, psychologically. Then he showed us what was missing on the list of what they should be worrying about which were their privacy that is a privilege, their time management and accumulating wealth. For time management: how you spend your time now will determine how your time is spent in the future. The time that passes by will never come back so it is up to how you utilize it, either productively or by wasting it. Another lesson was to become a learner instead of one who looks to be entertained. So basically open yourself up to learning opportunities even if they aren't fun because you will be able to use your knowledge to your advantage; knowledge is power. By reading a lot you will have a clearer mind and be more educated.

            The formula for wealth is wealth = assets - liability. 

            Humans are creatures of habits so being able to understand your habits and have control over them will help you become successful. You can't solve your problems with the same thinking and habits that you used to create them because it is like doing the same things repeatedly and expecting for a different outcome which is crazy. He also spoke about being an owner instead of a consumer and to create goals for yourself everyday by physically writing them out so you pay more attention to whether or not you completed them. More tips were to guard your reputation and privacy (they're your lifeline), understand your resources and to pay attention to your surroundings. Surround yourself with successful people and you will become successful yourself.

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"); });

Lab 12 Reflection Journal

                   For lab 12, I created something like an accordion using the dl, dd, and dt tags and with a jQuery function. It was nice learning about the new html tags that I had no previous knowledge of it. It was sort of like a list, with the format of a heading and subheading so I put colors that contrasted and went well with each other. I put in the jQuery function that was given to us and it used the addClass, siblings, and nth child attribute. I figured that it would work for things similar to the dl, dd, and dt tags like the li, ul, and ol tags, and it can also be applied to the table tags. I saw that there were many ways to do it producing the same outcome so I found it to be really cool and interesting. For the content, I had to write 8 questions and answers about a subject that I like, I chose web design. First I had to create these questions and answer them then put it in the dl, dd, and dt tags. After I checked that it worked, I uploaded it onto the server and submitted it. 

Lab 11 Reflection Journal

              For this lab, I had to create a dim and bright effect that switches when I hovered over the division tags and it also replaced the text when you hover over it and when you hover out of it, it goes back to the original text. First I created the division tags with text on it and gave them id names. Then using jQuery, I made a variable containing the new text the original text would be replaced with. Using the id names I gave the division tags, I put a function for when the mouse enters and when the mouse leaves. When the mouse enters, I put a fading to effect on the division and using that division id name, I changed the html to put a different text speaking of the jQuery magic. Then when the mouse leaves, I put the original text back and put another fading to effect but with different speeds and opacity. I did the same thing with the other division tag. After that I uploaded it onto the server after I checked that it was working well. In the beginning there was like a glitch with my jQuery, because it kept on blinking from dim to bright instead of doing it with the hovering effect. Then I fixed it and put in something extra with replacing the text back to the original after I took the mouse out of the division tag.

Lab 10 Reflection Journal

             Lab 10 was my first jQuery lab where I learned how to use it to create effects and manipulate objects. I used the hidden, show, fade in, and fade out effects. I first made division tags and put css on it to make it look like a box/button. Then I gave them each a id name so that each of them can perform the specific effect that I wanted to display. I created a table to organize each of the demonstrations to be clear on it. For the jQuery, the format is $(id-name).effect and I put in something extra on the top of the table. I made 2 division tags with separate text of one division saying bye and fading out and then the other division right after that division disappears, fades in saying hello again and staying there. I combined all the effects together to show my knowledge and understanding of how to use jQuery for effects.