An Image Can Make You Think A Thousand Thoughts

     What's up everyone, sorry for the lateness. I've been super focused with school this semester which is why I haven't been able to write as much as I would have, or write at all for that matter. I'm just in the mood to write and that's exactly what I'm going to do. Last time I wrote about how themes could make or break a site and the importance of giving options to your users. Well this week I will talk about the photos I used on my site. I chose out a few that I have and put them up on http://westleyjiujitsu.com/PHP%20Pages/photos.php. You can see both the happiness and intense in the expressions of the team. In all but one of the images I am smiling. In the one that I am not, I am focused.

     Images used on sites should be able to tell a story without physically saying a word. In the image above, I was in the middle of a belt test and I am concentrating on the technique being drilled by teammates. You can even see two girls in the back drilling techniques as well, showing that this is a sport for all ages and genders, one mat fits all. If you checked out photos page on my site, you will see that there is a sketched photo in place of the original photo. This is an effect that I absolutely wanted to do as soon as I learned about -webkit-transition. This CSS3 technique lets you have a transition effect to something, in my case it was a slow fade to another photo lying underneath.

     There are two photos, image_top and image_bottom. image _bottom is set to absolute position while image_top is set to position relative. What this does is get both images to set in the same position making for an easy transition effect. To do this, we have to work with the CSS style attribute, Opacity. This messes with basically the visibility of the photo. An opacity of 1 makes the photo appear normal, an opacity of .5 makes it look faded, and an opacity of 0 makes it invisible. So since the top image is the sketch, we want the opacity to go from 1 to 0 when the user hovers over it. This is done with image_top:hover{ opacity: 0;} Now you will see image_bottom. Now that worked and all, but the transition just was not smooth, that's where the -webkit-transition effect comes in.

     Like I mentioned earlier, you can use the transition effect on many style attributes so feel free to play with it, but for this demonstration we are using the opacity style attribute. To get the fade effect that we would like, we have to use the following CSS code: image_top { opacity: 1; -webkit-transition: opacity 1s ease;}.In this line of code we are saying to the browser to fade in the opacity of this image in 1 second at an ease speed. *To note, -webkit- is supported on Chromo and Safari, -moz- is supported on Firefox, -ms- is supported on Internet Explorer, and -o- is supported on Opera. So here is what the the code looks like in full:

.image_top {      position: relative;      opacity: 1;      -webkit-transition: opacity 1s ease;      -ms-transition: opacity 1s ease;      -moz-transition: opacity 1s ease;      -o-transition: opacity 1s ease; }
.image_top:hover {      opacity: 0; } .image_bottom {      position: absolute; }

Feel free to play with the transition effect, you'll be amazed of the stuff you can do with it. Thanks for reading and happy coding!

Source of Knowledge

     There are many different sources to gain knowledge on a subject. There is the ever so popular schooling system, the fading library route, friends, family, and the ever growing internet. Each has their pros and cons but like everything else in life, it is all opinionated. My views may not be the same as yours and that is ok, as long as we are trying to learn to better ourselves. I believe our preference in gaining knowledge is largely based on the generation we were born in. If you are in your 20s, when was the last time you went to the library?

     I loved the library growing up. As a child I would read all kinds of books because they were interesting. The imagination of a kid is unique and dwindles with age. As we grow up, we tend to view books as static pieces of objects, with nothing changing which might be why we don’t read books as much. It’s sad to think that we need something more than books to capture our attention, but that’s the way technology goes. This expansion of technology explains a lot about how we function and learn as a society today.

     I myself love learning through on hand experience.  In traditional schools, that rarely happens. There are technical schools for people such as I but we need more. Some of us move at a slower pace than others or even faster than others. We want to be the only student the teacher focuses on. That is why I love learning from videos through the internet so much. I can go at my pace and not waste nobody’s time. I grew up with computers at the technological boom and I love it. I rely heavily on my computers and especially the internet. It would be a much different world if we had no internet, just imagine your life with not network connection, pretty caca right?

     Having said that, we all are unique and have our special ways of learning.  I don’t particularly care how you learn, as long as you are trying. I just can’t stand it when I see people wasting their day away doing nothing to better themselves. Find something that you enjoy and making a living out of it, not just a hobby but a lifestyle. Sometimes we have to sacrifice fun to succeed in the future. There is no better feeling than doing something and saying “I can’t believe I did this. This is awesome!” That feeling of happiness, especially making your parents proud, is one that can’t be explained. We are all put on this earth for a reason, but it is up to us to discover that reason.

Gone But With A Cause

What's up everybody, West here back from a long hiatus. I was checking my blogger for the first time in a while and I noticed that I have not written a blog in almost a year! It's been a long time but it has not been wasted. The last blog I posted was about working on my new site, WestleyJiuJitsu.com. Well since then, I have basically completed it and am proud to show it off to everybody!

Last I left off I was discussing the importance of a logo for a website. Well since then I have put the finishing touches on the site. Since I want to discuss the changes in detail, I will choose one topic for this blog and will save the others for future blogs. For now, I will explain the themes I chose for my site and the option to select either by the user.

WestleyJiuJitsu can switch between two themes, a dark theme and a light theme. As the names suggest, one uses darker duller colors while the other uses lighter brighter colors. For the dark theme, I chose to go with black, blue, and a light beige. Below is an image of the dark theme (please ignore the fact that the image goes off of the border (: )

As you can probably tell, this is the dark theme. This is the default color of the site. The last website I created and my first ever website, West-Productions.com, was a light themed color. It was and is my portfolio and I wanted to have a lighthearted portrayal. For WestleyJiuJitsu, I wanted to portray a serious theme because of my passion for Jiu Jitsu and web development. I feel the site does a good job of that but I am open to suggestions as always.

Above is the light theme for the site. As you can see, the colors of this theme are white, blue, and a yellowish orange. I feel it is a nice opposite of the dark theme because of the lighthearted vibe it gives off. It kind of looks like a website for kids haha but that's what a light theme should be if not trying to be serious. In time I will probably change little things like the grey background color and link colors. As mentioned above, I am always open to suggestions so please drop me a comment letting me know what you think.

As with a lot of things I do on my site, having two themes started off as something to do, a practice exercise, but it turned out to be something I really wanted for my site. Having two themes can help users who can't see as well in darker or lighter colors. Giving users options is always key to keeping them happy and I wanted to implement this little feature in my site because of that. That pretty much sums up this post and thank you again for reading it, I really really appreciate it! Even though school is Starting August 19th, I will be posting lots of more blogs so please be sure to come back! Once again thank you for coming and I will electronically read you later, peace!