#3: A Brief Overview of jQuery

When I saw that jQuery was a possible blog topic, I was excited because it is something that I have been curious about since I’ve been web designing on my own. I found out about it while I was working on the homepage for my personal website. I wanted to incorporate a pop out photo gallery when if you click on a thumbnail, the photo pops out and enlarges on top of the home page screen. The method for achieving this was called a jQuery Lightbox. But when I looked up on how to incorporate it onto my website, the instructions were vague and I was overwhelmed with all the obscure code I was faced with. I ended up not incorporating it at all.

Fast forward five months later, and jQuery presents itself again. Unlike when I first started web design, I have now learned a bit about it, and will share some of this information with you today.

According to jQuery.com, jQuery is a “fast, small and feature-rich Javascript library.” It is accepted across multiple browsers and helps enhance the overall look and feel of a website. It is a scripting language which means it accompanies HTML and CSS, though it is not required. It is sort of like an accessory to the webpage to make it stand out that much more. It can be written and run on any operating system as long as you have a text editor (like Notepad for PC, TextEdit for Mac) and a web browser (Chrome, Firefox, Safari, etc.)

With jQuery, you can do more than just photo galleries. Smashing Magazine lists 50 different options for incorporating jQuery on your webpage, from looping galleries to drop down menus. One of the techniques that stood out to me was creating a polaroid photo viewer. With that, your images are placed in Polaroid frames and are able to be dragged about on the screen. It creates a nice layer effect and makes the webpage interactive. At the moment, I have no use for that, but I still think it’s pretty cool.

#2: RGBA vs Opacity

At first glance, rgba and opacity seem to do the same thing. Both deal with changing the degree of transparency on the page. You can specify the values from 1 (opaque) to 0 (completely transparent).

However, they are not the same. Rgba deals strictly with colors, while opacity can be applied to anything, even whole divs!  Rgba stands for red, green, blue, alpha. Alpha denotes the transparency of the color. Any color that you specify through rgb can change in strength using the alpha property. 

Still confused? css3.info’s “A brief introduction to Opacity and RGBA” has a great example of the difference between the two declarations. When you apply opacity to a background color of a div, it makes everything within the div inherit that opacity as well. But when you use rgba to set the opacity of the background color, only the background color changes in opacity, not the contents within the div.

Because this is a CSS3 technique, unfortunately all browsers do not support it yet (*cough* Internet Explorer *cough*). Drew McLellan from 24 Ways shows us a work around for this problem. Just like we do for font-faces, we can set up back-up background color values in case CSS3 is not available. Whatever element you applied the rgba to, you can also specify within the CSS a solid color replacement. And for a last desperate attempt, if you set the opacity to the background color, you can use a PNG image with slight opacity to achieve the same effect. That way, the effect you are trying to achieve can be seen across all browsers.

 In conclusion, rgba is a better way to set opacity to colors and won’t interfere with the other elements on the page. With rgba, you can set opacity for a drop down menu, but still have the text appear clear and crisp. 

#1: Creative Commons

Creative Commons is a license that allows for some aspects of a work to be used or manipulated as long as the original source of the work is credited. According to creativecommons.org, when you CC a work, you give people the right to “share, use and build upon a work you have created,” as long as it is for non-commercial purposes. The license is free to obtain, and as soon as you upload an original work, it is already under Creative Commons, and one must receive your permission to use it.

As a design student, Creative Commons licenses are very valuable. When I need photos for a project, whether it be as a source of inspiration or for direct use, I can use photos with a CC license free of charge. All I have to do is credit the original owner.

Flickr is a great photo sharing website that allows one to search specifically for CC photos. To access Creative Commons photos in Flickr, go to www.flickr.com. In the search box, type in whatever kind of image you are looking for. After pressing “enter,” click on “Advanced Search.” Scroll to the bottom of the page and you will see a checkbox for only searching through Creative Commons-licensed content. All the images that then show up are free to be used in any way as long as you cite the original uploader/owner of the photo.

Creative Commons opens up a wide range of opportunities for the thrifty college kid like me who can’t afford to buy stock images or who isn’t always able to take pictures myself.