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!

Ideas for New Website

What's up everybody, Westley here, so no need to fear. Whatever that means, it just rhymes. Anyways, back to the task at hand. I wanted to take some of your time and fill you in on what my next project is. After finishing the mobile site and having a lot more experience with web development since starting my portfolio, West-Productions, I wanted my next project to be a great challenge. I want to push myself and create and unique and entertaining website that will further my knowledge in the field and also help others.

After some intensive meditation(not really), I decided to create a website dedicated to jiu-jitsu practitioners. I decided on this for two reasons: 1) jiu-jitsu has been part of my life for about the past two years, 2) I want to create content that will help others as well as myself. This is the challenge that I wanted. I have to create a website that is user friendly, unique, and has great content that will drive traffic to it.

To get me prepared for this task, I thought it would be a great idea to learn some HTML5. To do this, I went to one of my favorite subscriptions on youtube, thenewboston. He makes awesome tutorials and you should check him out whenever you can. Basically though, after getting enough experience with XHTML I felt it was time for me to learn HTML5. It is so much more powerful and easier to use that it will make my website that much better.

One of the most important parts of a website is the logo. Now I'm not a designer but I know it is an integral part of a business. Imagine the corporations we all love to hate: Wal-Mart, Target, etc. They all have easy to spot logos that help build a relationship with the shoppers. When a user can make an easy connection with a logo, it helps build the brand. After looking up some tutorials on how to create a simple logo, I came across this site that shows how to create a nice looking logo in Adobe Photoshop Extended CS6 Win Student 65171279 (Google Affiliate Ad). After following the tutorial for a little bit and looking up an image to use, I came up with this:

I think it came out nice but I also know that improvements can be made. Any suggestions will be help. So let me explain how I came up with the finalization of this logo. First of all, due to my limited Photoshop skills I simply could not figure out to change the background after putting text on the layer. I was too lazy to change the background color and start over so I stayed with white. I then searched for an image online that portrays jiu-jitsu since I also lack drawing skills. I have to pay for it to use it because of royalty use but it's worth it. I then wrote the name of the website, Westley Jiu-Jitsu in capital letters because it gives off a serious vibe. I used blue because it was used in the tutorial and it actually looked nice.

After deciding on a logo, I decided build a quick template and place the logo in it to get a better view of how it would look on a page. I made some changes in the CSS file to match the color scheme of the logo and viola, we have a template.

I couldn't figure out how to take a snapshot of the whole page so I just decided to take a snapshot of the body content because it is the meat of the page and you already have seen the logo. Just imagine the logo on top of the body. In the body we have a navigation bar at the top, an article and sidebar section in the middle, and a footer at the bottom. Let me know what you think about the set up and colors, any suggestion would be helpful.

That is where I am at with the website. After I finish learning some HTML5, I will start working more on this website. Until then, please let me know what you think of the direction I am heading with this website, I would really appreciate it. Thanks so much for taking the time to read this post and make sure to stay tuned for future updates!

- West

Mobile Programming - Part 3

What's up everybody. West here for another installment of my mobile programming series. Well in part 2 of the series I left off with the need to install an image gallery for my photos. I have done that and some minor tweaking to make the experience for the user much better. Let's start with the image gallery I chose to use. After searching the internet for the best image gallery, I decided to go with a simple plugin called ImageFlip. You can check out the page here, but basically when a user touches an image, it will show the image in bigger resolution with a black background. When the user clicks the image again, he/she can see a little description of the image and chose to view the next, previous image, or just exit from full screen.

As you can see from the image to the left, when the user clicks the button to go to a specific gallery, this is what they will see. These images were made smaller to accommodate for the space to see all images is a friendly manner.

Now what you see in this image is when the user touches an image they wish to see in bigger resolution. It's pretty simple. You can see the description of the image at the bottom and the ability to view other images or exit the mode at the top.

I mentioned in my previous installment that I was having problem with the loading of the site when first opened. Meaning, all the pages would show rather than just the active page and this is a big no-no. Well I indirectly fixed this problem when I was messing with a new way to list my buttons.

A few things were changed from old installments. The obvious difference being the buttons. Before I was using "data-role='navbar'", I then changed it to "data-role='listview'" and viola, no more loading issues. I don't know what was the issue with navbar, but needless to say I won't be using it anymore unless under direct circumstances.
Another that I added was the small arrow to the right of each button. This just makes it clearer to the user that this button directs to another page. Just a simple visual enhancement for the user. I also added a button in the header that will navigate to the home page of the desktop site. I just did this to get the knowledge.

The last thing I changed was my contact page. Originally I had an actual contact form where the user would write a message and it would send that message to my email when the submit button was clicked. This was frustrating to deal with because there were many variables that could break the friendly experience, such as submitting with blank fields, reloading the page, and pressing the back button upon submission. I felt it was best to avoid this and just put my contact information for the user to use at their leisure.

As you can see, I simply added my contact information instead of a form. I felt this was appropriate because using a smart phone device automatically can do the background work for the user. For example, if the user were to click on my phone number, it would immediately go to the dial setup. If they were to click my email, it would go to their email service. In fact, this can be seen as even more user friendly than a contact form.

Well after weeks of working on and off of this mobile site, I can say that it is finished. For a first timer like me, I think it turned out well and I will only expand on it with future projects. If you are looking to build a mobile application, you should check out mobile sites first and see if that would work. To me, applications are overrated and I much rather use the convenience of the web than having to download an app that may or may not be update to the date. Just my opinion. It's worth a check out right? Anyways, thank you so much for reading or just viewing my images (I try to make them pretty), it was a great experience and I highly recommend checking it out if you're into web development. Thanks again for taking your time to read this again, it means so much to. I will be making other posts on new projects so stay tuned for those! Thank you and have a great time!

- West P.S.
The website is West-Productions. Go to the mobile link at the bottom to view the mobile site. Thanks again!

Mobile Programming - Part 2

What's up everybody, hope all is well with you. If you don't know who I am, my name is Westley Vazquez and I have created a little blog that follows my progress as a aspiring programmer. Being as the title is part 2, there must be a part 1. If you haven't checked it out, you definitely should because you will get a better sense of where I am with this mobile programming thing.

Now that I have the required introduction out of the way, I can talk about my progress for my mobile site for West-Productions. On the last post I made, I left off with an image of what my mobile pages would look like. Not much has changed from then to now. The design of the pages are the same, with some minor changes to make a for a better mobile experience. For example, my education page has a table with three columns, including two images. This was just too cumbersome and to accommodate for a better viewing perspective, I removed the two images to make it a two column table. This worked perfectly as you can check out for yourself on the site.

The mobile site is nearly finished with the exception of the contact, programming, and survey pages. The site also has a weird glitch that when the site is first accessed from a mobile device, it shows all pages instead of just the active page, weird right? So what I do is just click on the About page and then the education page and everything should run normal from there. I don't know why it does it but I definitely intend to look into it when I get a chance. I have the contact page set up to send me an email when a request is set, I just need to set it up with the database. The same can be said with the survey page. The mystery page is oddly enough the programming page because of the amount of images to be posted on it. I haven't worked on the page yet to even see how a native img tag would work on a mobile site. As far as I know there are two ways to display images on a mobile device, landscape and portrait. I need to figure out which one is best for my site and viewers. You can check out this site Popup-images to have a better sense of what I mean. Other than that, I shouldn't have any problems, but it is programming so I wouldn't be surprised either.

I am happy that I have some experience with mobile programming and I plan to create a mobile site for each website that I work on. Even though it may not be necessary, I enjoy the experience and the afterthought. I also can't wait to get started on my next website because it will be my biggest project yet. I actually have an image of what this site is supposed to be, somewhat, and it will not only be beneficial to me but many other people, which makes me happy. I shall stop blabbing on, but before I go, I want to thank you for reading this post and stay tuned for my next post. Peace!

- West

Mobile Programming

What's up everybody, Westley here. Hope everything has been well for you guys. Anyways, I want to talk about what I've been doing lately. About a couple of weeks ago, out of the blue I decided to look up some videos about mobile programming and YouTube. Now I've done some minor programming and android development so I was expecting something similar. Little did I know or LDIK for the texters out there.

In android development, so much had to be done to get a simple "Hello World!" on the screen. Mobile development... not so much. Now I'm not an expert in mobile development, but the videos I saw have it all written in one file, yes one file. Using HTML5, pages can be defined to separate one from another and then be mapped by the id attribute. It's really neat how such a seemingly simple concept can render a whole website functional.

I plan on going much deeper into mobile programming in the future but for now I just want to create a near representation of West-Productions.com because I have so many ideas running through my mind that I don't have the time. Not too mention that I would like to learn HTML5 before learning more about mobile programming.

Although my main site, West-Productions.com, is up and running, It's pretty obvious that I am still working on the mobile site. Here is a preview though of what it will look like.

I will keep you guys posted with everything that is going on in my coding life because I have a lot of things that I would like to try and take you guys on my journey to getting there. Thanks for reading and have a great night!

- West