• |

    The Visible Light Spectrum

    Visible Light

    I am taking a Light and Photography course at school where we are learning about the electromagnetic spectrum (EMS) and visible light, color temperature, etc. When giving us a website for the EMS, my professor mentioned he could not find one that was more “interactive”. So, me being the overachiever, I decided to make one. This is how I made it…

    I wanted to make a spectrum with clickable areas to display each color. I did not want an image map. Image maps went out with tables. So I created the color background using a multicolor gradient overlay in Photoshop. I then measured out how many pixels each color was. Using some CSS, I created a div that was the height and width of the image I created and made the image the background. I then created a div for each color in the spectrum. With the parent class .color, I was able to float all of color divs left and give them a specific height…

    .color{
    float: left;
    height: 196px;
    }

    Then, each color got its own color ID that was defined by the different widths.

    Now, the hover part. To make each of these colors a link, I simply used blank .gif images set to specific widths. When you would click on the invisible image, the color information comes up. The color boxes were done by code I adapted from the Lightbox JS project, which is linked on the EMS site. Maybe when I get some more time, I will do the entire EMS, not just the visible light sections. Later!

  • State Drop Down box

    Today, working on a project, I searched for a ‘State Drop Down Box’ for a form. Believe it or not, I couldn’t really find one, and had to ‘borrow’ own. So figured why not add one that is easy to get to my site. on top of Code I have added ‘Code Cips as a category, and for this post, the slug is state-drop-down, so the url should be https://casabona.org/?p=state-drop-down/. Easy enough, right?

    Just copy and paste*! When processing the form, the variable name for it is ‘state’. Later!

    *OK- it’s not showing up right in the textarea, but it will in an HTML doc.

  • |

    Cos Band Rocks

    cosbandrocks

    This site is finally launched! I have been waiting a while to finish it up and then make it live. One reason is because it is a little different from other sites I have done. This is a very image intense site that in essence is like websites for similar musicians, but not quite

    When Cos came to me for a website, the idea was to give it the same kind of look that similar musicians have, but the problem with the other sites was that it used frames and was not screen resolution friendly. To avoid the frames but still allow for a picture background, I used CSS’s overflow property for the main div, and set a height. That way if the content was longer, it would stay within the picture layout. This also allowed me to keep the width under 800px. With some PHP templates, frames were unnecessary.

    Some of the cooler stuff that was done was the handwritten nav links with a CSS mouse over effect. No javascript there. But most of the fun stuff is on the back end. Cos wanted to update the news, shows and pictures. So, for the news and shows, I implemented word press. The news is the regular blog and the shows is a page created within word press; one that can be edited in word press. As for the pics, with flickr and some javascript, the pics on the site get updated, and all of the pics have a nice set up.

    All in all, I am very happy with the way the site came out, and Cos is too! You can visit the site here. Later!

  • | |

    Good Design

    Mike over at Mike Industries recently wrote about a site that has poor design. It has sparked a lot of discussion. Most are saying that it is bad and they should have hired a professional. However some are playing devil’s advocate, saying that ‘it’s getting them attention, right?’

    As a web developer, I am often faced with stuff like this, and I am here to say that though they are getting the attention that maybe they wanted, it probably is not getting the business they wanted. Whenever I am designing something for a new client, I always, always tell them that the website is a reflection of how they run their business and their business’s image. I gave this example in the comments for that post:

    A business is represented by its presentation. If this store was in the slums of some run down city with a crooked sign and paint peeling, I have a feeling you wouldn’t go in there, because they don’t care about their appearance. It is the same with any website. If the website does not look good, the user will get the idea that this is the way they run their business: half assed and something that just gets the job done. And if that is how their business is represented how do they feel about their products?

    And it is not just design, but content. If a site is too cluttered, they are trying to throw too much in your face at once. People do not want to read a cluttered website. Websites do not need 100 bells and whistles for attention. It should have a nice looking design that makes them stand out (not something that looks the same as everyone else) and a good balance of text and images. The discussion on Mike’s page is bringing up a lot of good points, all of which you can read here. Later!

  • Ipod poster contest

    So, Mike over at Mike Industries is giving away an Ipod Suffle. Basically, parody a movie poster with Steve Jobs, the best one wins. So, I figured I’d try my hand at it. And, when I thought of Ipod and Steve Jobs, I thought “Million Dollar Baby”:

    Million Dollar Baby
    The Original Poster

    So with the help of photoshop and some creativity (well, I think anyway)- I came up with this, which I entered into the contest:

    Steve's Million Dollar Baby
    My Poster

    Let me know what you think- Later!

  • | |

    WConroy.com

    WConory.com

    A new Featured Project. Bill Conroy is running in my district for Supreme Court Justice (of my district). He came to me asking for a site design for what he had already laid out page wise. After looking at some politicians’ websites, I noticed that a lot of these sites were simple, but not bad looking- they had a good balance of images and text. So I decided I would shoot for that too (considering that’s what I normally do). It was a little difficult to add a good mix of images, however, because he does not have photos from public events. That might change, and I would be glad to add them where I can, but back to the design.
    For the banner, I went with a serif text to give kind of the elegant look that said ‘Supreme Court’. To drive that home even further, I added Lady Justice. The other main component of the banner is a map of the counties he will represent. I felt that not only did it look good, but it was also informative. The client also wanted the American Flag, which I added in the background at an opacity of 75%.
    Getting to the layout, I wanted something, as I mentioned before, simple and informative. The information was not a problem, as all of it was provided to me. I decided to go with a left side navigation in a Georgia font keeping with a serif theme for something elegant. On the right I added a header to each page- and to make it better the image is just a background with a hidden header. I did this for 2 reasons. If someone has CSS disabled, they will not see an image block, they will see an actual header. Also, this is for Search Engine Optimization. Google does searching based on headers. So adding hidden headers allows me to add the design I want, but still makes the site come up in a google search. I also used only divs- no tables, all divs. Tables are slowly being phased out of web design, so I’m trying to employ new ways of organizing data. With CSS it’s very easy too.
    After doing that, I did my normal design routines. PHP template, ul for navigation, verdana font for easy readability, etc. I’m glad to say the client is very happy with the site, as am I. Visit the Site

  • |

    New Design!

    I’ve decided to launch the new design, even though the pages arent all working. I will keep you posted on that, as well as a better descripiton of the site and what i did. Later!

  • |

    New Design!

    I have decided to redo the layout for my blog. This means the website is going to be more like a construction site over the next few days/weeks. It will remain like this most of the time, but there will be some times were it will probably be, well, bad. Just a heads up- thanks for your patience. Later!

  • | |

    Casabona.Org

    The Official Launch! Im excited to announce, on June 1st, 2005- the official launch of Casabona.Org– a website I have been working for a few months now. It is teh culmination of my PHP/MySQL skills up to this point. You can read the Site Schematic here to get an idea of how i did it all (or most of it). The idea behind the site besides incorporating my new skills is to inform people of the different services I offer and a place to post my resumé. I will also be posting different projects there ready for testing/downloading. Very soon: a Resumé Creator. Fill out a form, and boom- your resumé ready to print. The beta version will be out as soon as I work out a couple of bugs. The site will be updated every monday and/or friday with new links, stories, project updates ect. One thing I plan on adding soon is a contact me page- a form you can fill out with suggestions for the site or projects, or general questions or comments. I hope you all like the site! Let me know what you think!! Later.