• | | |

    New Design Launch!

    New Design

    Announcing (finally), the new design of TheJoey.Net. You may have noticed over the last 2 days, this design was up more and more. I was putting the finishing touches on the design and wanted to see how it looked live, in the flesh. Over the next couple of weeks I will talk about all of the new stuff, including the design, AJAX features, my first crack and a WordPress plugin, and more.

    As for right now, I am just happy I finally launched it. I started working on it in late December, and if you’ll recall, I started doing a live update a month ago. Let me know what you think in the comments!

  • | |

    The Gift of Faith Foundation

    Gift of Faith

    Bill Conroy contacted me over the summer about creating a website for a non-profit organization he started called The Gift of Faith Foundation, which offers a college scholarship to the winner of an annual contest. What he wanted, to put it in his own words, was something “simple but elegant.”

    He gave me a lot of control for the design, but did bring some of his ideas to the table. For example, the images in the background on each page was his idea that I made happen. I used a lot of blues and glowing/light effects to give the website a ‘promising’ and welcoming feel. Since it was religiously based, I tried to capture that kind of heavenly aspect. He also provided text for all of the pages, with the exception of the home page. I felt that it should be pretty informative, as well as just pretty. I added boxes for each major section of the site- separate boxes to give the site a modular, Web 2.0ish feel. While the site is admittedly a simple one, I feel it does accomplish its goal and has enough flare there to make it not boring. Right now I am looking into added an online donation button to the site, probably via Google Checkout. I am of-course, open to suggestions. Later!

  • | | |

    Winn Cards and Comics

    Winn C&C

    The Winn Site is a project I have been working on for a couple of months now. The guys wanted a brand new site- the one they had was, umm, bad. They also wanted an online catalog that they could update, along with the ability to update tournament dates. With that in mind, I got started.

    The design I gave them was a pretty basic XHTML/CSS layout. The logo was one that they supplied, so I went with that color scheme. I used divs to organize the soon-to-be large amount of information in an aesthetically pleasing way. The challege with the design of this site was that they could add as many products they wanted whereever they wanted, and the design had to be able to handle it. The great part about the site, however, is the programming aspect of it. I created a number of functions to print the catalog info, as well as add, edit and delete to/from the site. The back end I wrote is totally custom, password protected, and designed to be pretty ‘liquid,’ meaning easy to update and manage. They have the ability to add products, including uploading a picture [how to on that in a later post], add tournaments, with custom date and time functions, and add categories which automatically become part of the navigation. They can also edit anything, and delete anything. The product page is the best page on the site, using flow control to change what exactly is displayed on the site. The user can also sort any information on the product pages and there is a search function, making finding any product very easy to do.

    All in all it was a good experience, and I learned a lot. I did have experience in coding CMSs before this, such as on my own sites, but this was my first real updatable online catalog. In the near future they hope to add a shopping cart, which it looks like I will also be doing for them. Later!

  • | | |

    Debunking New Facebook

    Facebook

    A few weeks ago, I wrote a post on the new Facebook stuff. Well it seems they added lots more, and there is outrage. I personally don’t find it too bad, and here is why.

    What exactly ‘new’ Facebook is offering is news feeds on when your friends update their profiles in any way. This includes adding a new friend, wall messages, new groups, pictures, etc. People don’t like that because it makes Facebook more “stalkerish,” to use a term coined by most of the Student Activities Office. But really, why would people post these things on Facebook? So others will see them. Facebook is an outlet for people to brag or wear their heart on their sleeve. More importantly, however, to share their information with friends. And the feeds are in accordance to your Privacy settings on Facebook.

    One detail I think most people are over looking too, is the ability to “Hide” a story. Since your profile has your own mini feed on it, you can click on the X on any of your stories to hide that story. Then, it won’t show up there, or on your friends’ main news feed. Also, unless people can see your profile, they cannot see, for example, what a person wrote on your wall. Facebook is really not all that different. It is just easier to get information you are privy too. There will, no doubt, soon be a way to turn off the feeds too.

    The main reason I like the new features, however, is because the people at Facebook are very smart, and from a programmer’s stand point, this is really a complex work of art. Without diving too much into the details I can tell they spent a good amount of time adding these features, and making it so it meshes nice with the now ‘old’ Facebook. I say give it a chance. If they take it away, you will probably miss it. Later!

    PS- I overlooked another new feature- the ability to support candidates in the upcoming mid-term elections. Go to “edit” next to “My Profile” and click “Election”

    UPDATE: This morning, there is an Open Letter from Mark Zuckerberg apologizing for the feeds, and announcing new privacy settings.

  • | |

    College V2

    College V2

    I had the good fortune of redesigning a blog I read often, College V2. Sean posted that he was looking for a redesigner, and took the opportunity. I took a PSD that he sent me, chopped it up, and made it into a valid XHTML/CSS template for WordPress. I used CSS for the mouse over navigation and some extra programming to display the author comment in a different container. All-in-all I am very happy to be able to work on the site, and am glad to say that Sean is happy with the new design. You can read what he wrote about it here. Later

  • | |

    JLC Web Design

    JLC Web Design

    Over the last 6 months I have been designing a redesigning the website for my web design company, JLC Web Design. I feel like this time, I got it right. The new design consists of a new front end, with a lot more navigation/information, icons and a new portfolio layout. There is also a brand new back end.

    With this redesign, I wanted the site to be completely dynamic. Since there is a lot more content, I wanted it to be easier for me to update or change information. So all content get’s pulled from a database, which in turn can be edited from the custom Content Management System (CMS) I built. With the CMS, I made it so I could add new content and edit/delete existing content. This includes users, FAQs, news items, websites and pages. I hope to eventually move the back end to be AJAX driven.

    As for the front end, this was my first attempt at icons for a site I designed, and I am pretty happy with them. They are a simple icon set but I really think they add to the site. Also, since the site is dynamic, while some pages have a 3 column layout, others have a 2 column layout. This allows pages like the home page to house a lot of different information and pages like the services page to keep the full concentration on all of the services we have to offer. Each ‘module’ on the home page can also be changed with the click of a button- even the right navigation.

    All in all, I am very happy with the official Version 3.0 of JLC Web Design. I hope my users are too. Later

  • | | |

    Casabona.Org v2.0 (finally)

    Casabona.Org

    You might recall that just over 13 months ago, I posted this, announcing the official launch of my second personal site, Casabona.Org. I also wrote a somewhat lengthly ‘schematic’ of the site for those who were interested to read. The original idea was to showcase and build my PHP/MySQL skills. For that reason, the design suffered a little. I also wanted Casabona.Org to be a catch all website for my personal and professional…stuff, for lack of a better word.

    After realizing that keeping up Casabona.Org as a second blog, which is essentially what it was, was too much work and somewhat redundant, I decided to change the scope of that project. With the redesign of this site, it was a little easier to look at Casabona.Org now as a solely professional site. Cutting out all of the personal content on the site left me with 3 crucial elements: Resumé, Portfolio, Contact Info. A redesign was also in order.

    For the redesign, I wanted the site to look professional, and like I put some sort of effort into the layout. I used a good amount of CSS with image gradients (such as the top of the background and the portfolio item backgrounds) and some other design bells and whistles, like the strips in the top right, and the footer image. I also wanted to do some shadowing to give some elements of the site a 3D effect and while I didn’t do the body of the site that way, I think where I did add a drop shadow (banner and portfolio thumbnails) makes the site ‘come alive’ a little more. All in all, I am very happy with the design, and how each element plays a part in the whole scheme of the site.

    The focus of the redesign came with the Projects page. I needed a nice place on the site to display my entire design portfolio- websites, desktop publishing and multimedia. I created a database with 2 tables- one for websites and one for other projects. While both tables would be similar, I did this primarily for the back end and adding new projects. I then made the development and publish pages like film strips or slideshows, so my portfolio is easily navigatable. The end result was a dynamic, easy to update, easy to use portfolio and home for all of my projects.

    After about 6 months of on and off work, and a great amount of time put into the site, I can say I am very happy with its outcome, and hope the users feel the same way. Later.

  • |

    Wrcnepa.Org

    Women's Resource Center

    When the WRC of Scranton, PA came to me for a redesign, their website was in poor shape. There was not main navigation or template, meaning the back button was used A LOT. way to much. It was a plain white background, and not to much effort went into design. It was also poorly coded. O, and did I mention that right click was disabled by javascript? Because it was. SO I had quite a task ahead of me.

    We needed something far more esthetically pleasing that this. We also needed great functionality. There was a lot of pages and navigation to deal with, a a good folder structure was in order. So we broke up all of the pages (some 35 pages on the main navigation) into 8 main links, with mouse over menus bringing you to the other 27. I then created a folder hierarchy of those 8 main links with the other pages within. There was also an images folder and an includes folder to make my life easier. After that was set up, I started on the design. This was the first time I used a “drop shadow” background on the main content, and I like it. I also wanted to make a more image intense banner- since the last site was basically baron, I wanted to spice things up. A few nice effects in photoshop and we have an “involved-but-not-to-involved” banner. They also wanted a button for internet security. One of my favorite parts is the history page, where I implemented the “Lightbox” AJAX program to display different years in t he WRC’s history

    When it came to the navigation, I used some javascript menus (the main nave works even without javascript enabled, so no worries). They also wanted the browser to close when you click escape, which I also did with some javascript. The final thing they wanted was a flash intro, which I gladly made upf or them. All in all I am pretty proud of the site- it was definitely the biggest I have worked on page wise. Which there was not to much programming involved, design implementation was huge. View the site here. Let me know what you think in the comments! Later!

  • | | |

    OMG MySpace!?

    OMFG

    As many of you might know, I was a big hater of MySpace. This was because of all the emo, 12 going on 20 year olds that infest its system, as well as the horribly (HORRIBLY) done layouts. I mean, they break every rule in the “Book on Good Design,” that is- picture as background, a million animated GIFs, embedded music, super wide layout, no color scheme. It’s all wrong!

    So, I was going to make it my undertaking to fix it up, and learn how to make it look awesome. However, Mike D. of Mike Industries beat me to the punch. Much thanks to Mike D. for the time he spent making it “web developer friendly,” if MySpace could be such a thing. What I hope to accomplish when I get some time (Lord knows when that will be…) is to make it real cool and add some of my own things to build on top of what Mike did.

    What I like about MySpace, after you get through lines and lines of CSS to make it look nice, is the social networking aspect of it that Facebook has. I figure it’s a good way to put my name out there. We will see what comes of it. You can check it out Here. Let me know what you think. Later!

  • | |

    Fading Pages in Javascript

    I am not a huge proponent of Javascript. However, I recognize that it is becoming more and more powerful and used, especially since AJAX has become more popular. With a new redesign of one of my sites, I wanted to do something different and cool- so I looked to 24 Ways. There I found a nice tutorial on using the effects from Script.aculo.us. Using that tutorial and some extra programming, I was able to create fading “pages”, which are actually divs we fade in and out.

    First of all, you must follow the 24 Ways tutorial. I have made all of the javascript from that tutorial available in this post, and then my modified combo.js. All of my changes occur in that. Once you read that 24 Ways Tutorial, come back here.

    So by now, you are familiar with all of the files, and the main functions provided in the combo.js. I took combo.js and modified it a little here:

    JS Code

    Notice I added a few lines at the top of the function. On top of that I added this to my main page:

    JS Small

    These codes create and check cookies, which is what I used to check what “pages” were open. When a page is open (when the page is first loaded, it is welcome), a cookie created with the name of that page. When a new page is clicked on, my code checks the cookie to see what is currently open, then closes it. After that, the cookie is rewritten with the new page open. The cookie functions are included in my combo.js. When it is all said and done, we have this. Later!